在 jQuery 中检测背景点击

Question

假设我有以下 HTML：

<div>
  <span>span text</span> div text <span>some more text</span>
</div>

我想这样做，以便当我单击跨度时，它将触发一些事件（例如使文本变为粗体），这很简单：

$('span').click( ... )

但是现在当我单击元素之外时，我想要要触发的另一个事件（例如使文本正常粗细）。我需要以某种方式检测不在 span 元素内部的点击。这与blur() 事件非常相似，但适用于非INPUT 元素。顺便说一句，我不介意是否仅在 DIV 元素内检测到此点击，而不是在页面的整个正文中检测到。

我尝试使用以下方法在非 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

另一种解决方案是在单击事件中读取事件的目标。这是一个以这种方式实现它的示例：

$('div').click(function(e) {
  if (e.target.nodeName != "span")
     ...
});

我想知道是否有一个更优雅的解决方案，例如blur()。

Answer 1

根据我的研究，我认为 stopPropagation 函数是最合适的。
例如：

$("#something_clickable a").click(function(e) {
   e.stopPropagation();
})

请参阅如何防止在单击子锚点时触发父级的 onclick 事件？ 类似的问题。

Answer 2

你的最后一个方法应该效果最好，即使它很混乱。这里有一些改进：

$('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');
        }
    });
});

它不干净，但应该可以工作。没有不必要的绑定，这应该是万无一失的（没有误报等）。

Answer 3

我想出了一个解决这个问题的方法......

在 jQuery 发布之前， -clicked-with-javascript.aspx" rel="nofollow noreferrer">确定是否使用 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;
}

Answer 4

如果您从跨度的单击处理程序返回 false，您将阻止事件冒泡，这将使 div 单击处理程序无法运行。

Answer 5

$(':not(span)').click(function(){
    //dostuff
})

Answer 6

使用 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。