Felix Felix - 1 month ago 10
jQuery Question

Jquery : How to stop other events when particular event is take place?

Hi currently i have a div that is draggable , resizble and rotatable . Please see this code .



$('.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/

Here when i rotate the div that time also draggable function works , and some time resize also happen . How to prevent the other two event when rotation is take place .
After rotation the three function need to work as before.

Answer

You should use e.stopImmediatePropagation() in your event as it prevents every other event from executing.

Comments