在jQuery中检测后台单击
说我有以下HTML：
span text div text some more text 我想这样做，以便当我点击span时，它会触发一些事件（例如使文本变为粗体），这很容易：
$('span').click( ... )
但是现在当我点击元素时，我想要触发另一个事件（例如使文本正常重量）。 我需要以某种方式检测不在span元素内部的点击。 这与blur（）事件非常相似，但对于非INPUT元素。 我不介意是否只在DIV元素内检测到这个点击而不是页面的整个BODY，顺便说一句。
我尝试使用以下内容在非SPAN元素中触发事件：
$('div').click( ... ) // triggers in the span element $('div').not('span').click( ... ) // still triggers in the span element $('div').add('span').click( ... ) // triggers first from span, then div
另一种解决方案是在click事件中读取事件的目标。 以下是以这种方式实现它的示例：
$('div').click(function(e) { if (e.target.nodeName != "span") ... });
我想知道是否有更优雅的解决方案，如blur（）。
你的最后一种方法应该效果最好，即使它很乱。 这里有一点改进：
$('span').click(function() { var span = $(this); // Mark the span active somehow (you could use .data() instead) span.addClass('span-active'); $('div').click(function(e) { // If the click was not inside the active span if(!$(e.target).hasClass('span-active')) { span.removeClass('span-active'); // Remove the bind as it will be bound again on the next span click $('div').unbind('click'); } }); });
它不干净，但它应该工作。 没有不必要的约束，这应该是万无一失的（没有误报等）。
根据我的研究，我认为stopPropagation函数是最合适的。 例如：
$("#something_clickable a").click(function(e) { e.stopPropagation(); })
请参阅如何在单击子锚点时阻止父级的onclick事件触发？ 对于类似的问题。
在jQuery发布之前我想出了解决这个问题的方法……
确定是否使用Javascript单击了任何其他外部元素
document.onclick = function() { if(clickedOutsideElement('divTest')) alert('Outside the element!'); else alert('Inside the element!'); } function clickedOutsideElement(elemId) { var theElem = getEventTarget(window.event); while(theElem != null) { if(theElem.id == elemId) return false; theElem = theElem.offsetParent; } return true; } function getEventTarget(evt) { var targ = (evt.target) ? evt.target : evt.srcElement; if(targ != null) { if(targ.nodeType == 3) targ = targ.parentNode; } return targ; }
如果从跨度的单击处理程序返回false，则会阻止事件冒泡，这将使div单击处理程序无法运行。
$(':not(span)').click(function(){ //dostuff })
使用tabIndex属性，您实际上可以使任意元素可聚焦：
var node = document.createElement("span"); node.tabIndex = -1; node.addEventListener("focus", function () { // clicked the element... }, true); node.addEventListener("blur", function () { // clicked away from the element... }, true);
不幸的是，这个例子可能不适用于IE。 我自己没有测试过，所以可能！
此外， tabIndex为-1表示可以单击该元素，但无法使用键盘进行聚焦。 如果希望使用Tab或Shift+Tab使其可聚焦，可以将其更改为0 。