Question

我有一组span元素。在代码中，我有一个表示“选定”对象的全局变量。单击click时使用span事件我重置对象的类，重置全局变量，然后将对象设置为变量并更改其类（使其“突出显示”）。这有效地在单击对象时切换选择。

var currentItem = null;
$( ".item" ).click( function() {
    if( $( this ).hasClass( "selected" ) ) {
        $( this ).removeClass( "selected" )
        currentItem = null;
    } else {
        if( $( ".item" ).hasClass( "selected" ) ){
            $( ".item" ).removeClass( "selected" )
        }

            $( this ).addClass( "selected" );
            currentItem = $( this );
        }
} );

点击页面的空白区域时，我希望能够取消选择。我尝试在body对象上创建一个点击事件，但这会覆盖span点击事件，因此未选择任何内容。我是一个完整的jQuery noob，不知道该去哪里。

Answer 1

在当前处理程序中使用event.stopPropagation()，以便click不会冒泡到<body>，同时触发它的处理程序，然后您的方法可以正常工作，如下所示：

var currentItem = null;
$(".item").click(function(e) {
  if($(this).hasClass("selected")) {
    $(this).removeClass("selected")
    currentItem = null;
  } else {
    $(".item.selected").removeClass("selected");
    currentItem = $(this).addClass("selected");
  }
  e.stopPropagation();
});
$(document).click(function() {
  $(".item.selected").removeClass("selected");
});

You can view a demo here，但有一个建议，如果只有一个元素可以selected，你需要跟踪它吗？如果查询成本不是一个因素，您可以通过currentItem找到$(".item.selected")，从而简化此代码。我不确定你是如何使用currentItem的，只是你有一个选项：）

Answer 2

您在body上设置了点击事件。 BUt你还必须告诉span click事件来阻止事件的传播..

$( ".item" ).click( function(event) {

    event.stopPropagation();
    //your code
});

Answer 3

您将点击事件放在body上的想法很好。

您只需要注意点击body的任何后代都会导致点击事件冒泡到body，并触发该处理程序。

您需要在span事件处理程序中停止传播。

$( ".item" ).click( function(event) {
    event.stopPropagation();
    ...

jQuery文档

event.stopPropagation() http://api.jquery.com/event.stopPropagation/

修改

另一个有效的替代方法是在处理程序的末尾简单地返回false。

$( ".item" ).click( function() { // Your code... return false; });

Answer 4

您不一定需要全局变量，因为您的DOM也拥有该状态信息。

// de-select old selection and select new item
$(".item").click( function(evt) {
  $(".item.selected").removeClass("selected");
  $(this).addClass("selected");
  evt.stopPropagation();
});

// de-select everything
$("body").click( function() {
  $(".item.selected").removeClass("selected");
});

// your currently selected element can be retrieved by this anytime:
$(".item.selected")[0]

两次跟踪状态（在DOM和全局变量中）不会让你头疼：

始终小心更新全局变量
“全局”状态与“DOM”状态不同步而产生的错误

Answer 5

创建对html元素$("html")的点击，并在您执行所需操作时将其返回为false。如果您正在使用CSS进行一些大小调整，则主体无法扩展整个页面。这是一个例子：

$("html").click( function(e) {

    e.stopPropagation()

});

<强> 修改

呀。忘了stopPropagation()。更改了代码以读取它。但是，仍然应该使用html元素作为监听器。

Answer 6

除了陈述的答案（除非我错过了这个），您不需要在页面加载时将click（）事件附加到正文 - 您可以在选择项目后执行此操作。并不是因为你正在停止传播而受到伤害，但在我看来，只有在相关的持续时间内激活/设置一个事件处理程序它才更“正确”。

Answer 7

代码太多，我们可以更容易地做到：


"use strict";
/*global $*/
$(function () {
  $('html').live('click', function (e) {
    $('.item.selected').removeClass('selected');

    var $t = $(e.target);
    if ($t.hasClass('item')) {
      $t.addClass('selected');
    }
  });
});

使用'html'来绑定事件更好，因为身体可能不是100％的高度，例如。点击空白区域返回预期结果。

我们不需要全局对象，因为这个脚本保证我们只有一个选定的跨度，我们可以用它来引用它：


$('.item.selected');

取消选择jQuery中的元素

7 个答案: