3

早上好，

我在页面上有一组显示为列表的框，在这些框中可能有一些可以单击的链接。我希望框内的链接正常工作（即冒泡并执行默认操作或然后由事件处理程序进一步处理 DOM），但如果在其他任何地方单击框，则它应该被特定的附加到包含所有框的“列表”的事件处理程序。

简单的 html 表示

<div class="boxlist">
    <div class="box" data-boxid="1">
        Some text, and possibly a <a href="#">link</a> and another <a href="#">link</a>, and perhaps even a third <a href="#">link</a>.
    </div>
    <div class="box" data-boxid="2">
        Some more text, this time without a link.
    </div>
</div>

我认为应该工作的javascript。

$(function () {
    $('.boxlist').on('click', '.box :not(a)', function (e) {
        var boxid= $(this).closest('.box').data('boxid');
        console.log('open: ' + boxid);
    });
});

我的期望是上面的 javascript 应该处理所有不是来自标签的点击。但是，由于某种原因，当单击框时（框本身或标签都无关紧要），它会触发此事件 X 次，其中 X 是框列表中的标签总数。

所以我有两个问题： 1. 我在 :not() 选择器上做错了什么。2.有没有更好的方法来处理这种情况？

谢谢你的帮忙！

4

2 回答 2

3

linkUsing jQuery :not 选择器实际上非常慢，例如： http: //jsperf.com/not-vs-notdasdsad/4，最好只使用事件委托。因此，在这种情况下，您希望跟踪 .boxlist 上的每次点击，但检查节点类型以查看其是否为锚点。这是一个例子。

$(function () {
    $('.boxlist').on('click', function(ev){
        if(ev.target.tagName != "A"){
            // handle box click code
            console.log('box click');
            return false;
        }
        // Otherwise allow event to bubble through.
    });
});

这是一个jsfiddle示例 http://jsfiddle.net/drXmA/

他们也是您的代码不起作用的几个原因

.box :not(a)

应该

.box:not(a)

并且这也不起作用的原因是因为 .box 不是锚标记它具有作为锚标记的子元素它永远不会找到名为 .box 的锚标记，如果它们是一个回调将不会执行。将 .box 更改为锚标记将使代码不会执行，因为 .box 是锚并且它仅在 .box:not(a) 时运行

于 2013-03-28T07:46:57.477 回答
0

我猜你想要这样的东西：

$('.boxlist').on('click', '.box:not(a)', function (e) {
   var boxid = $(this).closest('.box').data('boxid');
   console.log('open: ' + boxid);
}).on('click', '.box a', function (e) {
   e.preventDefault().stopPropagation();
});

演示小提琴

我认为最好停止默认行为并停止事件冒泡到其父级。.on()链接到其中.box排除的项目<a>并停止默认行为和事件气泡e.preventDefault().stopPropagation();

于 2013-03-28T07:52:24.567 回答