Jquery：特定のイベントが発生したときに他のイベントを停止するにはどうすればよいですか？

Question

現在、私はdraggable、resizbleと回転可能な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のその時もドラッグ機能が動作し、いくつかの時間のリサイズも起こる回転します。どのように回転が行われているときに他の2つのイベントを防ぐために。 回転後、3つの関数は以前と同じように動作する必要があります。

Answer 1

他のすべてのイベントが実行されないように、イベントにはe.stopImmediatePropagation()を使用する必要があります。