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

Question

基本上，我想单击页面上除输入字段和一个块级元素（扩展为其中的所有子元素）之外的任何位置，删除所述输入字段。所以我在整个文档上放置了一个 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();
}