javascript - jQuery : How to stop other events when particular event is take place?

Question

嗨，目前我有一个可拖动、可调整大小和可旋转的 div。请查看此代码。

$('.new-div').draggable({
  containment: "#bord",
  create: function() {
    $(".new-div").css("width", 'auto');
  },
  drag: function() {
    $(".new-div").css("width", 'auto');
  },
  start: function() {
    $(".new-div").css("width", 'auto');
  },
  stop: function() {
    $(".new-div").css("width", 'auto');
  }
});
$(document).on("click", ".closeButton", function() {

  $(this).closest('div').remove();
});



$('.resizeButton').draggable({
  containment: '#bord',
  drag: function() {
    $('.new-div').height($('.resizeButton').position().top + 17);
    $('.new-div').width($('.resizeButton').position().left + 17);
    $('.new-div').width($('.resizeButton').position().left + 17);

    $('.new-div').css({
      'font-size': ($('.new-div').height() / 2.3)
    });


  }
});

var rotation = 0;
var rotating = false;
var startX = 0;

jQuery.fn.rotate = function(degrees) {
  $(this).css({
    'transform': 'rotate(' + degrees + 'deg)'
  });
};

$(document).mousemove(function(e) {
  if (!rotating) return;
  rotation = startX - e.clientX;
  $('.new-div').rotate(rotation);
});

$(document).on("mouseup", function() {
  rotating = false;
});

$('.rotateButton').on("mousedown", function(e) {
  rotating = true;
  startX = e.clientX;
});

.new-div {
  z-index: 1;
  position: absolute;
  width: auto;
  word-break: break-all;
  text-align: center;
  left: 30%;
  top: 55px;
  border: 2px solid black;
}
.parent-div {
  max-width: 236px;
  width: 236px;
  position: relative;
  overflow: hidden;
}
.closeButton {
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  width: 27px;
  height: 27px;
  background: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton {
  display: block;
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 27px;
  height: 27px;
  background: url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
  background-size: contain;
  cursor: resize;
}
.rotateButton {
  color: red;
  display: block;
  position: absolute;
  top: -10px;
  left: 82px;
  width: 27px;
  height: 27px;
  background: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
  <div class="parent-div">
    <div class="new-div" contenteditable="true">
      add your message....
      <a class="closeButton"></a>
      <a class="rotateButton"></a>
      <a class="resizeButton"></a>
    </div>
    <div class="bord" style="z-index: -1;">
      <img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">

    </div>

  </div>
</div>

https://jsfiddle.net/felixtm/jaboLc3u/13/

这里，当我旋转 div 时，可拖动功能也起作用，并且有时也会发生调整大小。轮换发生时如何防止另外两个事件发生。 旋转后这三个功能需要像以前一样工作。

Answer 1

您应该在事件中使用 e.stopImmediatePropagation()，因为它会阻止所有其他事件的执行。