Question

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

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

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

我尝试过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事件（因为我有其他页面处理程序监听超链接点击）而不会导致递归。

这甚至可能吗？

Answer 1

问题不是来自div，而是来自a。

点击a后，该事件会传播到div的点击处理程序，这会导致a上的另一次点击，该点击会传播到div ..等等

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

http://jsfiddle.net/JJwct/

function MyClickHandler(e) {
    e.stopPropagation();
    window.location.href = $(this).find('a').attr('href');    
}

Answer 2

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

function MyClickHandler(e) {
    if ( this == e.target ) {
        e.stopPropagation()
        $(this).find('a')[0].click(); // need to trigger the native click event, not jquery
    }
}

Answer 3

无法停止递归。 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>

ON绑定过多的递归

3 个答案: