Question

说我有以下HTML：

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

我想这样做，以便当我点击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（）。

Answer 1

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

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

有关类似问题，请参阅How do I prevent a parent's onclick event from firing when a child anchor is clicked?。

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发布之前，我想出了解决这个问题的方法......

Determine if any Other Outside Element was Clicked with 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表示可以点击该元素，但无法使用键盘进行聚焦。如果您想通过0或Tab关注它，可以将其更改为Shift+Tab。

在jQuery中检测后台单击

6 个答案: