JQuery - 删除正文点击

时间:2017-09-13 07:05:03

标签: javascript jquery

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

  1. 点击.myBackground
  2. 时添加.myDiv课程
  3. 点击.myBackground上的其他位置时删除body
  4. 当我分别尝试它们时,它们工作得非常好。但是当我试图将两者结合在一起时,并没有按预期工作。我知道点击事件会在点击我的div时被触发,这就是.myBackground没有被添加的原因。有没有其他方法可以达到我的要求?

    
    
    $(document).ready(function() {
      $(document).on('click', '.myDiv', function() {
        $(this).addClass('myBackground');
      });
      $(document).on('click', 'body', function() {
        $('.myDiv.myBackground').removeClass('myBackground');
      })
    });
    
    .myDiv {
      height: 100px;
      width: 100%;
      background: cyan;
    }
    
    .myBackground {
      background: red;
    }
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="myDiv">
    </div>
    &#13;
    &#13;
    &#13;

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

4 个答案:

答案 0 :(得分:2)

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:2)

你需要通过添加

来阻止事件传播到身体水平
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="myDiv">
  </div>
</body>

<强>演示

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

你需要添加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>

答案 3 :(得分:0)

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

});