Question

检查以下代码段或此fiddler。我想从下面的片段中获得两件事，即

点击.myBackground

.myDiv

点击.myBackground上的其他位置时删除body。

当我分别尝试它们时，它们工作得非常好。但是当我试图将两者结合在一起时，并没有按预期工作。我知道点击事件会在点击我的div时被触发，这就是.myBackground没有被添加的原因。有没有其他方法可以达到我的要求？

＆＃13;

$(document).ready(function() {
  $(document).on('click', '.myDiv', function() {
    $(this).addClass('myBackground');
  });
  $(document).on('click', 'body', function() {
    $('.myDiv.myBackground').removeClass('myBackground');
  })
});

＆＃13;

.myDiv {
  height: 100px;
  width: 100%;
  background: cyan;
}

.myBackground {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
</div>

＆＃13;

任何帮助表示赞赏。提前谢谢。

Answer 1

你的身体中有元素，所以当你点击它时会记录两次点击，只有当元素不是.myBackground / myDiv元素时才使用if来触发删除

＆＃13;

empl_name:schwayb OR natixis

＆＃13;

$(document).ready(function() {
  $(document).on('click', '.myDiv', function() {
    $(this).addClass('myBackground');
  });
  $(document).on('click', 'body', function(e) {
    if (!$(e.target).is('.myBackground'))
      $('.myBackground').removeClass('myBackground');
  })
});

＆＃13;

body {
  height: 200px;
  width: 100%;
}

.myDiv {
  height: 100px;
  width: 100%;
  background: cyan;
}

.myBackground {
  background: red;
}

＆＃13;

Answer 2

你需要通过添加

来阻止事件传播到身体水平

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="myDiv">
  </div>
</body>

<强>演示

＆＃13;

e.stopPropagation()

＆＃13;

$(document).ready(function() {
  $(document).on('click', '.myDiv', function(e) {
    $(this).addClass('myBackground');
    e.stopPropagation()
  });
  $(document).on('click', 'body', function() {
    $('.myDiv.myBackground').removeClass('myBackground');
  })
});

＆＃13;

body
{
  height: 200px;
  width: 100%;
}

.myDiv {
  height: 100px;
  width: 100%;
  background: cyan;
}

.myBackground {
  background: red;
}

＆＃13;

Answer 3

你需要添加e.stopProgation（）; some more info about it

var addBackground = function(e){
  e.stopPropagation();
  $('.myDiv').addClass('myBackground');
};

var removeBackground = function(){
    $('.myDiv.myBackground').removeClass('myBackground');
};

$(document).ready(function() {
  $('.myDiv').on('click',addBackground);
  $('body').on('click',removeBackground);
});

.myDiv {
  height: 100px;
  width: 100%;
  background: cyan;
}

.myBackground {
  background: red;
}

body
{
  height: 1000px;
  width: 100%;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<body>
<div class="myDiv">
</div>
</body>

Answer 4

$(function(){

	$(document).on('click', 'body', function(e) {
	    if ($(e.target).hasClass('myBackground'))
	        $('.myDiv').removeClass('myBackground');
	    else if ($(e.target).hasClass('myDiv'))
	        $('.myDiv').addClass('myBackground');
	});
	
});

body {
  height: 200px;
  width: 100%;
}

.myDiv {
  height: 100px;
  width: 100%;
  background: cyan;
}

.myBackground {
  background: red;
}

<div class="myDiv"></div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

试试这个

$(function(){

    $(document).on('click', 'body', function(e) {
        if ($(e.target).hasClass('myBackground'))
            $('.myDiv').removeClass('myBackground');
        else if ($(e.target).hasClass('myDiv'))
            $('.myDiv').addClass('myBackground');
    });

});

JQuery - 删除正文点击

4 个答案: