Felix Felix - 1 year ago 75
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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download