I have a draggable div , made dragable with jqueryUI draggable library. I have an onclick handler on the div, but when I drag the div it then fires the click handler, which I don't want. The drag stop happens before the click, so I tried this:
$("#div").draggable({
stop: function(e) {
e.originalEvent.stopPropagation();
}
});
but the onclick event still fires. Any ideas JavaScript gurus?
You can use chaining and handle it directly on the click method.
While in the dragging state, the draggable gets a new class: ui-draggable-dragging.
$("#div")
.draggable()
.click(function(){
if ( $(this).is('.ui-draggable-dragging') ) {
return;
}
// click action here
});
Related
I have a .click() on a div.
I added a button in the div and now every time I click the button, the JQuery does the function associated with the div and preforms the action on the button.
I understand why it is doing this. I was wondering if I could make the click listener ignore the children?
Is there already a function/syntax for that or do i need to make one from scratch? The div and the button are called by #id.
To make the event listener ignore children, you can check that the bound element is the same as the target
$('div').on('click', function(e) {
if ( e.target === this ) {
// DIV was clicked, not children
}
});
Or go the other way, preventing the event from bubbling up
$('div button').on('click', function(e) {
e.stopPropagation();
});
I'm using jQuery 2.1.3. I try to build a button that will show/hide content on click. I also want to hide the content when there's a click on a wrapping container (in my application it's the document itself, but I used a regular div in my example below). As there is some more logic to handle I'm also making use of custom events that I fire via .trigger().
This works fine but I have a problem. When I show the hidden content I apply an eventlistener to document to hide the content when the user clicks anywhere on it. This eventhandler is fired straight after the content is shown resulting in my content gets hidden immediately.
I can only get around this by using $evt.stopPropagation() in my toggle buttons event handler. But that's no solution for me as I need the event to bubble up as other elements listen for that.
Heres the simplified HTML:
<div id="document">
<button id="btn" type="button">Toggle</button>
<div id="content" class="hidden">Hidden Content</div>
</div>
And heres the JS to this:
//trigger custom show event
var show = function () {
$("#document").trigger("show");
};
//trigger custom hide event
var hide = function () {
$("#document").trigger("hide");
};
//handle custom show event
$("#document").on("show", function () {
$("#content").removeClass("hidden");
$("#document").on("click", hide);//add listener to container, fires immediately
});
//handle custom hide event
$("#document").on("hide", function () {
$("#document").off("click", hide);//remove listener from container
$("#content").addClass("hidden");
});
//on toggle button click call custom events
$("#btn").click(function ($evt) {
//$evt.stopPropagation(); would work but event should propagate
$("#content").hasClass("hidden") ? show() : hide();
});
JSFiddle
What could I do about this? Stopping event propagation on toggle button click would show my content but i need this event to bubble up as there are other elements around waiting for that. How could I avoid that the applied event listener on document fires immediately?
PS: jQuerys .show()/.hide() functions are no alternative for me.
I have script that triggers on hover and on click events on specific tag
$(".dropdown-button").dropdown({
hover: true, // Activate on hover
});
Unfortunately, triggering onclick event is set by default.
How Can i forbid triggering script on click event? I need it to be triggered only on hover.
I need it only in this particular case for this specific tag .dropdown-button.
update
I use materializecss http://materializecss.com/dropdown.html
.off() disables onhover event, but not click.
To forbid triggering script on click event it would be good if you overwrite the click event. You can bind this click event with a empty function.
You probably can do this
var hoverTimer;
var hoverDelay = 200;
$('.dropdown-button').hover(function() {
var $target = $(this);
// on mouse in, start a timeout
hoverTimer = setTimeout(function() {
// do your stuff here
$target.trigger('click');
}, hoverDelay);
}, function() {
// on mouse out, cancel the timer
clearTimeout(hoverTimer);
});
I have a drag-drop-application which uses JQuery UI onDrag and onDrop. This application is a room reservation system that have tabs. I have made the drop-working perfectly, but there is one functionality I really want (if possible).
Is there a way to create a event-handler for the tabs, that fires only if you are dragging an element?
Example: You want to move a person from Tab1 to Tab2, without clicking the tab, you can only drag the person -> hover the tab -> then the tab gets clicked.
There is no specific event handler for dragging an element, but by manipulating other events, you can make it work.
The trick is to use the mousemove event, but make it only work when the mouse has been pressed down on the draggable element. Therefore, we make a certain Boolean true in the mousedown event and then make it false in the mouseup event. The mousemove event checks if the Boolean and runs its code if and only if the Boolean is true.
Here's an example:
$(document).ready(function() {
//Make draggable draggable
$("#draggable").draggable();
//mousedown and mouseup Boolean
var drragging = false;
$("#draggable").mousedown(function() { dragging = true; });
$("#draggable").mouseup(function() { dragging = false; });
//mousemove event -> mousedrag event
$("#draggable").mousemove(function() { if (dragging) {
//The event:
$("#draggable").css("color", "rgb("+Math.round(255*Math.random())+", "+Math.round(255*Math.random())+", "+Math.round(255*Math.random())+")");
}});
});
<span id="draggable">Drag me!</span>
<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.4/jquery-ui.min.js"></script>
I have tree structure in which mouse over on node name displays (UL) list. Each item in the list has a click event attached to it. The issue Im facing is when I click on any child item in list, it fires the mouseover event attached to parent span. Can you guys please help how to solve this issue?
<span id="treeNodeText">
<ul><li id="firstItem">First Item</li></ul>
</span>
My code is like this:
I have conman event attach method:
attachEvents(domId,eventType,callBackFunction,otherParams)
In attachEvent function I attach events to dom ids and assign appropriate call back functions
The mouseover event is fired before you click. So, apart with a delay, you can't prevent its handling.
Here's one way to deal with that :
var timer;
document.getElementById("treeNodeText").addEventListener('mouseover', function(){
clearTimeout(timer);
timer = setTimeout(function(){
// handle mouseover
}, 400); // tune that delay (depending on the sizes of elements, for example)
});
document.getElementById("firstItem").addEventListener('click', function(){
clearTimeout(timer); // prevents the mouseover event from being handled
// handle click
};
In JavaScript, events bubble up the DOM. Please read more about it: event order and propagation or preventDefault/stopPropagation.
In short, you can pervent event bubbling by
function callBackFunction(event){
event.stopPropagation()
}
or
function callBackFunction(event){
return false
}
return false also has the effect of preventing the default behavior, so it's technically equivalent to:
function callBackFunction(event){
event.stopPropagation()
event.preventDefault()
}
function myfunction(e){
e.stopPropagation()
e.preventDefault()
}
this will Help