0

我正在尝试在 UL 上绑定一个处理程序，以检测何时在 LI 内单击 div，然后在 LI 内触发超链接单击事件。

注意：我只想点击 .col2 来触发事件。

我收到太多递归错误，因为超链接的点击事件触发了 UL 上的点击事件

我试过 stopPropagation 但它似乎不起作用，有什么想法吗？

$('#ul_search').on('click', 'div.col2', MyClickHandler);

function MyClickHandler(e) {
    e.stopPropagation();

    var control = $(this);
    control.find('a').click();

    e.stopPropagation();
}

<ul id="ul_search">
    <li>
        <div class="col1">
            Col1
        </div>
        <div class="col2">
            Go to 
            <a href="http://www.google.com">Google</a>
            by clicking here
        </div>
    </li>
    <li>
        <div class="col1">
            Col1
        </div>
        <div class="col2">
            Go to
            <a href="http://www.yahoo.com">Yahoo</a>
            by clicking here
        </div>
    </li>
</ul>

更新

请注意：具体来说，我想取消 UL 的 click 事件并触发 HYPERLINK 的 click 事件（因为我有其他页面处理程序来侦听超链接点击）而不会导致递归。

这甚至可能吗？

4

3 回答 3

2

问题不是从 向上传播div，而是从 向上传播a。

当a单击 时，事件传播到div的单击处理程序，这导致再次单击a，传播到div.. 等

这可能是一个更好的解决方案：

http://jsfiddle.net/JJwct/

function MyClickHandler(e) {
    e.stopPropagation();
    window.location.href = $(this).find('a').attr('href');    
}
于 2013-09-09T18:54:10.187 回答
0

只需确保单击的元素与调用事件处理程序的元素相同。

function MyClickHandler(e) {
    if ( this == e.target ) {
        e.stopPropagation()
        $(this).find('a')[0].click(); // need to trigger the native click event, not jquery
    }
}
于 2013-09-09T18:55:58.733 回答
0

无法停止递归。jquery 文档指出：

处理程序可以通过调用 event.stopPropagation() 来防止事件在文档树中进一步向上冒泡（从而防止这些元素上的处理程序运行）。但是，附加在当前元素上的任何其他处理程序都将运行。

http://api.jquery.com/on/

我解决这个问题的方法是完全改变设计并取消事件处理程序。

我用超链接包裹了 col2 div。

<li>
    <a href="http://www.google.com" class="action"></a>
    <div class="col1">
        Col1
    </div>
    <a href="http://www.google.com">
      <div class="col2">
          Go to Google by clicking here
      </div>
    </a>
</li>
于 2013-09-09T19:49:17.560 回答