Javascript 使整个 div 可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3292774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a whole div clickable
提问by King Julien
I have a link inside a div and I need to make the whole div clickable... found several tutorials on the Internet but non of them worked for me...
我在 div 中有一个链接，我需要使整个 div 可点击……在互联网上找到了几个教程，但没有一个对我有用……
回答by Sarfraz
Raw JavaScript:
原始 JavaScript：
<div onclick="alert('You clicked me !')">Click Me</div>
jQuery:
jQuery：
$('#div_id').click(function(){
alert('Clicked !!');
});
Update:(With reference to your link)
更新：（参考您的链接）
<div class="myBox">
blah blah blah.
<a href="http://google.com">link</a>
</div>
jQuery:
jQuery：
$(".myBox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
The above code cancels the default action of link (going to link) with return falseand binds the clickevent to the div with class myBox, then it finds the link's srcattribute inside the div and window.locationis used to redirect the page to the srcattribute of the link present inside the div. So this basically makes the div clickable.
上面的代码取消了默认的link（going to link）动作，return false并click用class将事件绑定到div上myBox，然后src在div里面找到link的属性，window.location用于将页面重定向到src当前在div里面的link的属性分区 所以这基本上使 div 可点击。
回答by Allen Gingrich
If you're saying you want the entire div to be clickable for navigation, then you can either wrap it with an anchor () tag, which is not standards compliant, or add a css style to the contained anchor tag, making it the size of the containing div, which is standards compliant. I will use a div that is 250px by 250px in this example:
如果您说您希望整个 div 可点击以进行导航，那么您可以使用不符合标准的锚 () 标签将其包装起来，或者向包含的锚标签添加 css 样式，使其成为大小包含 div，这是符合标准的。在这个例子中，我将使用一个 250px x 250px 的 div：
<div id="container"><a href="" style="display:block;width:250px;height:250px;">Link</a></div>
回答by Wolf Cat
I ran into this problem last year. I simply added an onclick to the div. Like so: <div id="testimonial" style="cursor:pointer;" onclick="document.location='http://www.mysite.com/testimonials.html'">
我去年遇到了这个问题。我只是在 div 中添加了一个 onclick。像这样：<div id="testimonial" style="cursor:pointer;" onclick="document.location='http://www.mysite.com/testimonials.html'">
回答by John A.
In HTML5 it is now valid to have a divor whatever inside an a. That should do the trick. No scripts needed, unless that's what's in your link.
在 HTML5 中，现在可以在 a 中包含div或任何内容。这应该够了吧。不需要脚本，除非这是您链接中的内容。
回答by Hbirjand
You can use a JavaScript code at to achieve your goal, please take a look at this tutorial.
您可以使用 JavaScript 代码来实现您的目标，请查看本教程。
$(".myBox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
and this is the HTML example :
这是 HTML 示例：
<div class="myBox">
blah blah blah.
<a href="http://google.com">link</a></div>
but there is a tricky way to achieve this using a CSS code you must nest an anchor tag inside your div tag and you must apply this property to it,
但是有一个棘手的方法可以使用 CSS 代码来实现这一点，您必须在 div 标签中嵌套一个锚标签，并且必须将这个属性应用到它，
display:block;
when you've done that,it will make the whole width area clickable (but within the height of the anchor tag),if you want to cover the whole div area you must set the height of the anchor tag exactly to the height of the div tag,for example:
完成后，它将使整个宽度区域可点击（但在锚标记的高度内），如果您想覆盖整个 div 区域，则必须将锚标记的高度精确设置为div 标签，例如：
height:60px;
this is gonna make the whole area clickable,then you can apply text-indent:-9999pxto anchor tag to achieve the goal.
这将使整个区域可点击，然后您可以应用text-indent:-9999px锚标记来实现目标。
this is really tricky and simple and it's just created using CSS code.
这真的很棘手也很简单，它只是使用 CSS 代码创建的。
here is an example: http://jsfiddle.net/hbirjand/RG8wW/
