logo标签列表

如何使DIV在非可点击区域也可点击？

jqueryhtmlcss
5
我有一个包含几个链接（<a>标签）和其他元素的<div>。我想让这个<div>表现得像一个按钮，这意味着无论用户点击它的哪个部分，它都应该导航到某个链接。有一些解决方案，如这个页面所示：将div变成链接 我也可以用jQuery使其工作，但问题是我希望<div>中的<a>标签像以前一样正常工作。我找不到任何可以实现这一点的解决方案。我该怎么做？
2个回答
4
$('#mydiv a').click(function(e) {
  e.stopPropagation();
});

事件会冒泡，这就是它们所做的。这被称为传播。在jQuery事件对象上调用stopPropagation应该可以防止事件冒泡到包含它的div中。

这里是jQuery文档

由于事件处理程序没有return false，因此浏览器默认的<a>标签点击处理仍将被触发，这意味着href将像往常一样被跟踪。

在这里查看一个工作示例：http://jsfiddle.net/Squeegy/2phtM/

1

我认为你需要一个事件处理程序来确定触发了点击的元素 - 就像这样

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>
            $(function() {
                $("#links").click(handler);
            })
            function handler(event) {

                var $target = $(event.target);
                if($target.is("#links")) {

                    window.location = "divlocation.htm"
                }
            }
        </script>
    </head>
    <body>
        <div id="links" style="background: yellow">
            <a href="test1.htm">link 1</a><br>
            <a href="test2.htm">link 2</a>
        </div>
    </body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接