We Keep Coding

Stop event propagation from jquery Draggable stop to onclick

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
});

Checking if mouse buttons are down without listening to an event?

I'm building a dragging widget thingy, it listens to 'mouseup'/'mousedown' events from the interactive element.
Works fine most of the time but I've found the 'mouseup' to be a bit unreliable. Is there an event independent way of checking whether the mouse buttons are up/down? I could attach it to a timer or the mousemove event to make it foolproof.

You have to use an event however you can have script from within the events to assign the state of the mouse down that you can test later.
var isMouseDown = false;
document.addEventListener("mousedown", function()
{
isMouseDown = true;
});
document.addEventListener("mouseup", function()
{
isMouseDown = false;
});
if (isMouseDown == true) { ... }

Is there an event independent way of checking whether the mouse buttons are up/down?
No, there isn't. But for your dragging code, your best bet for listening for mouseup isn't the element you're dragging, but the document as a whole. You still won't get the event if the mouse release is outside the window, but you will if the mouse has been moved abruptly and released such that it's outside your element when the release occurs.
You can also listen for mousemove, which of course fires a lot, and also tells you whether buttons are down (via the buttons property on the event object).

How to unbind scripts from dom element?

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);
});

Prevent context menu and mouse drag on all elements but one

I am trying to prevent right click context menu, and mouse drag on every element on my page except for one called 'IPAddress'.
Using the code below would seem to do the job, but I still cannot select the element 'IPAddress'.
How can this be altered to allow for this behavior?
html.on('selectstart dragstart contextmenu', function (evt) { // prevent right click, and mouse drag
if (html.not('#IPAddress')) {
evt.preventDefault(); return false;
};
});

Try this:
if (!$(evt.target).is('#IPAddress'))
jQuery not is intended for elements-set filtering, and is not the opposite of is.

jquery mouseclick event

I am quite new to jquery and looking for event that handles mouse down event. Over now I have found and use something like:
$("#canva").live('mousedown mousemove mouseup', function(e){ ....
but it fires function(e) even when mouse is over canvas element (both when the left button is clicked or not).
I am looking forward to event that will be fired in every change of coordinates above #canva element and when my mouses button is clicked. Releasing left mouse button should cause end of this event.

One way to do this would be to create a global variable and to modify its value when the user clicks over the element as such:
var mouseIsDown = false;
$('#mycanvas').on('mousedown', function () {mouseIsDown = true});
$('#mycanvas').on('mouseup', function () {mouseIsDown = false});
Now all you have to do is to bind 'mousemove' to the function you want to fire and simply appending a conditional to the body of the function that checks the state of the left click and escapes if necessary.
function fireThis(e) {
// if the user doesn't have the mouse down, then do nothing
if (mouseIsDown === false)
return;
// if the user does have the mouse down, do the following
// enter code here
// ....
// ....
}
// bind mousemove to function
$('#mycanvas').on('mousemove', fireThis);
Now, if the user were to click inside the element and then drag the mouse outside the element before releasing, you'll notice that 'mouseup' will never get triggered and the variable mouseIsDown will never be changed back to false. In order to get around that, you can either bind 'mouseout' to a function that resets mouseIsDown or bind 'mouseup' globally as such:
$('#mycanvas').on('mouseout', function () {mouseIsDown = false});
OR
$(document).on('mouseup', function () {mouseIsDown = false});
Here's an example: http://jsfiddle.net/pikappa/HVTWb/