javascript - 如何避免 Bootstrap 下拉列表中子元素的点击事件

Question

我在我的项目中使用 Bootstrap 下拉菜单。

<ul class="dropdown-menu">
            <li class="favProperties dropdown-submenu pull-left"><a href="#">Property</a>
<ul>
<li> property 1 </li>
<li> property 2 </li>
<li> property 3 </li>
</ul>
</li>
        </ul>

我在具有“favProperties”类的“li”标签上有 onclick 事件。

$(".favProperties").on("click", function (e) {
alert("clicked");
});

当我单击父 Li 标签时，此操作正常。但是当我点击子 Li 标签时，也会触发此点击事件。

如何避免这些点击事件。

Answer 1

$(".dropdown-menu li.favProperties").on("click", function (e) {
    e.preventdefault()
});

event.preventDefault()方法阻止元素的默认操作发生。事件参数来自事件绑定(bind)函数。如果事件是可取消的，则 PreventDefault() 方法会取消该事件，这意味着属于该事件的默认操作将不会发生。