javascript - 取消特定元素上的事件冒泡 - javascript

Question

基本上，我想点击页面上的任何地方，除了输入字段和一个 block 级元素(通过扩展，其中的所有子元素)删除所述输入字段。所以我在整个文档上放置了一个 onclick 事件。为了保持上述条件，我将条件放在明确说明之前，以便仅在事件不是由特定元素引起时才执行。

clearSearch = function (e){
 e ? e : e = window.event;
 e.target ? target = e.target : target = e.srcElement;
 if (target.nodeName != "INPUT" && document.getElementById('ul'))
 document.getElementById('input').value = "";
}

使用此方法，如果我想继续单击 ul 而不会导致操作，我必须在此 if 语句中明确说明它。然后我必须对 ul 下的 li 元素执行相同的操作。然后是我创建的任何其他子项。

基本上这看起来效率很低，我想知道是否有人可以帮助我想出一个更好的解决方案来解决我为自己造成的困惑局面。

Answer 1

您可以从 clearSearch 中删除复杂的逻辑，只让它清除搜索框。然后向您不想调用此方法的元素添加一些新的 onClick 处理程序。在这些处理程序中，将 event.cancelBubble 设置为 true 以防止调用 clearSearch 函数。

来自 quirksmode :

For a complete cross-browser experience do:

function doSomething(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}