将触摸事件绑定到那些带有 class 的元素而不是它的子元素

Question

我正在尝试将悬停转换为所有菜单列表项的触摸，这些菜单项的 class 为 .menu-item-has-children ONLY not its children（除非他们也有 class .menu -item-has-children）。还有其他菜单项没有分配此 class，我想保留它们。目前我下面的代码停止链接 touched/clicked 但我需要为 .menu li.menu-item-has-children 的子链接重新启用 clicks/touches 除了具有 class [=13= 的任何子链接] 我该如何解决这个问题，以便只有 .menu-item-has-children 个链接成为目标？

所以我有这个 HTML 结构：

<ul>
    <div class="drop">
        <li>
            <a href="#">Link text</a>
        </li>
        <li class="menu-item-has-children">
            <a href="#">Link text</a>
            <div class="drop">
                <ul>
                    <li>
                        <a href="#">Link text</a>
                    </li>
                    <li class="menu-item-has-children">
                        <a href="#">Link text</a>
                        <div class="drop">
                        <ul>
                            <li>
                                <a href="#">Link text</a>
                            </li>
                            <li>
                                <a href="#">Link text</a>
                            </li>
                        </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <a href="#">Link text</a>
        </li>
    </div>
</ul>

我的jQuery

$('.menu li.menu-item-has-children').bind('touchstart touchend', function(e) {
      return false;
      $(this).toggleClass('hover_effect');
});
// Trying to re-bind the click for child links that do not have the .menu-item-has-children class?
$('.menu li.menu-item-has-children > .drop li').bind('touchstart touchend', function() {
      return true;
});

Answer 1

你必须使用 e.stopPropagation() 而不是 return false

$('.menu li.menu-item-has-children').bind('touchstart touchend', function(e) {
  return false;
  $(this).toggleClass('hover_effect');
});
// Trying to re-bind the click for child links that do not have the .menu-item-has-children class?

$('.menu li.menu-item-has-children > .drop li').bind('touchstart touchend', function() {
  return true;
});

Answer 2

这是代码

$(document).ready(function(){
    $('.menu li.menu-item-has-children').bind('touchstart touchend', function(e) {
        $(this).toggleClass('hover_effect');
        e.stopPropagation();
    });
   $('.menu li.menu-item-has-children > .drop li').bind('touchstart touchend', function(e) {
        e.stopPropagation();
   });
});

Answer 3

Currently my code below stops the links being touched/clicked but I need to re-enable clicks/touches for children links of .menu li.menu-item-has-children

返回 false 意味着脚本的执行将在您 return 所在的行终止。在 $(this).toggleClass('hover_effect'); 行代码曾经执行之前，您正在 returning false。尝试这样交换这两行：

$('.menu li.menu-item-has-children').bind('touchstart touchend', function(e) {
    $(this).toggleClass('hover_effect');         
    return false;
});

注意： 如果我正确理解了你的问题，那么你不需要 child li生成没有 class .menu-item-has-children 的相同触摸事件。

现在假设您想通过触摸与 li.menu-item-has-children 关联的 children 之一（没有相同的 class）来做一些其他事情。首先将处理程序中的代码提供给任何你想要的，然后 return false 不久之后以防止 current 元素上的 touch 事件冒泡到 li.menu-item-has-children:

$('.menu li.menu-item-has-children > .drop li:not(.menu-item-has-children)').bind('touchstart touchend', function() {
      // do some stuff here 
      return false;
});

注意 :not() 过滤器的使用，它排除了带有 class .menu-item-has-children.[= 的任何 child li 元素27=]

我已尝试重现您的问题（唯一的区别是我已将元素绑定到 click 事件） HERE。 尝试删除 .child 处理程序上的 return false 集以查看行为的变化。

Answer 4

html 中的事件通过它们的每个父级冒泡，激活任何绑定函数。这称为事件传播。

正如其他答案所提到的，return false; 阻止事件向上传播。将子元素更改为具有 return true 将无效，因为事件仍会在父元素处停止。您无法通过更改子事件使其进一步传播。

您可以做的是将父事件修改为仅 return false（如果事件在其上触发）。您可以使用 event.target 获取触发事件的元素。当事件直接在该方法绑定的元素上触发时，以下代码只会 return false。

$('.menu li.menu-item-has-children > a').bind('touchstart touchend', function(e) {
      return event.target !== this;
      // I've left this line in because it's in your example,
      // but it will never do anything if it is after the return statement
      $(this).toggleClass('hover_effect');
});

将触摸事件绑定到那些带有 class 的元素而不是它的子元素

Binding touch events to just those elements with a class & not its children

html

javascript

jquery

bind

hover