How to make div clickable?

Question

I want to make this div click-able and want to use same href of inside <a> and want to keep link in inside <a> also (so if JS is disabled then link will be accessible).

<div id="example">

<p> some text </p>

<img src="example.jpg />

<a href="http://stackoverflow.com"> link </link>

</div>

I mean i need like this.

<div id="example" href="http://stackoverflow.com">

<p> some text </p>

<img src="example.jpg />

<a href="http://stackoverflow.com"> link </link>

</div>

possible duplicate: http://stackoverflow.com/questions/180211/jquery-div-click-with-anchors — Alastair Pitts, May 21 '10 at 03:26

score 7 · Accepted Answer · answered May 21 '10 at 03:29

7

Something like this should do

$('#example').click(function() {
  window.location.href = $('a', this).attr('href');
});

answered May 21 '10 at 03:29

Ben Rowe

28,406
6
55
75

6

To add to this, having the `cursor: pointer;` css style on the `#example` div will give the users feedback that they *can* click the div. – Josiah May 21 '10 at 03:34
@Josiah +1 thanks for good point of usability. The only cons of this trick is it's doesn't show link status in status bar upon mouse over on `div`. – Jitendra Vyas May 21 '10 at 03:47
@Slaks - What do you mean by `return false;`? should i add this in code? – Jitendra Vyas May 21 '10 at 03:49
@SLaks - but where? do you mean like this `$('#example').click(function() { window.location.href = $('a', this).attr('href'); return false; });` What is the benefit to add this? – Jitendra Vyas May 21 '10 at 04:00
@Ben Rowe - how to do this for multiple `div`? I mean how to add more `div` here `$('#example')`? Can i add more `div` like this `$('#example, #example2, #example3 ')` – Jitendra Vyas May 21 '10 at 04:01
@metal-gear-solid yeah you can expand the selector to include other divs in that way – Ben Rowe May 21 '10 at 04:08
You can also use `window.status` to affect the hover over status if you want, however it only works in IE unfortunately. – Ben Rowe May 21 '10 at 04:09

score 3 · Answer 2 · answered May 21 '10 at 04:08

I cannot reply to the above conversation yet because I am new here, but I just wanted to say that you do not need to return false from this function. What that does is prevent the default behavior of the event from happening (which, in the case of clicking a div is nothing) and prevent the event from propagating up to the next element in the DOM hierarchy.

It is unlikely that either of these are necessary for this case. Additionally, if you do need these behaviors, you can get them separately and more clearly like so:

// note that the function will be passed an event object as
// its first argument.
$('#example').click(function(event) { 
  event.preventDefault(); // the first effect
  event.stopPropagation(); // the second

  window.location.href = $('a', this).attr('href');
});

Again, I don't think either approach is necessary in this case, but it is important to understand how they work, because you will need one or both of them frequently.

Correct, but the event handler here is bound to the `
`, not the ``, so the `return false;` would not take effect in time to preventDefault on the ``. Actually, this is always true within jQuery, which, as far as I know, always uses the bubbling model, but in normal DOM scripting, the `
`'s handler could fire first in W3C compliant browsers when using capturing-style event propagation. In any case, it wouldn't make much of a difference for this specific case. — Kent, May 21 '10 at 05:08

score 2 · Answer 3 · edited Nov 10 '11 at 03:12

2

<html>  
  <body>
    <div onclick="window.location.href = this.getElementsByTagName('a')[0].href;">
      <p>some text</p>      
      <a href="http://www.google.co.in/">link</a>
    </div>
  </body>
</html>

edited Nov 10 '11 at 03:12

PointedEars

14,752
4
34
33

answered Nov 09 '11 at 10:23

vengatesh26

21
1

Good solution, although it needs refinement in case there is another `a` element before the relevant one; ID should work. jQuery and its [buggy, inefficient attr()-based approach](http://jsperf.com/sizzle-is-slow) can't beat this. You should skip `href` LHS because it's tainted. "Unobtrusive" (misguided): `document.getElementById("example").onclick = function() { window.location = this.getElementsByTagName('a')[0].href; };` But usually you have a wrapper that checks and tries one of `addEventListener()` or `on…` for this, like my `jsx.dom.addEventListener()` (URI too long, sorry). – PointedEars Nov 10 '11 at 02:50

score 0 · Answer 4 · answered Nov 11 '11 at 09:31

The above answers are all accepted by me. And generally u can make the same or even more great effect to "div" than "a" by css. And you can add js function to show the css changes when a event happened like Click. Maybe like this: DIV.onclick = function(){ change the target dom object css here }。 then when the event occurs, you will see the effect. and if you want to change href to another one. write js like location.href="http://www.target.com"; it will work for you.

How to make div clickable?

4 Answers4