In my html I have a span of class dragHandle embedded within a li.
<div class='treeView'>
<ul class='tree'>
<li><span class="dragHandle"></span>Item 1
<ul>
<li><span class="dragHandle"></span>Item 2 link</li>
</ul>
</li>
</ul>
I attach event handlers using jQuery as follows:
$(".tree li").click(function(event) {
alert("click");
event.stopPropagation();
});
$(".dragHandle").mousedown(function(event) {
alert("down");
event.stopPropagation();
});
$(".dragHandle").mouseup(function(event) {
alert("Up");
event.stopPropagation();
});
When I mousedown and mouse up over the element I get the down and up alerts, however I also get the click alert of the li's event handler too. I thought that this should be prevented from by the call to event.stopPropagation in the mousedown and mouseup handlers. How do I stop the click event being called for mousedown/up events on the dragHandle?
TIA,
Adam
How do I stop the click event being called for mousedown/up events on the dragHandle?
You capture... and eat... that event:
$(".dragHandle").click(function(event) { event.stopPropagation(); });
The key here is that click, mousedown, and mouseup are distinct events. Although you might think of a click as being a mousedown followed by a mouseup, in reality you might have click events triggered by user actions that don't even involve the mouse, as well as combinations of mousedown and mouseup that don't result in any click events at all.
You could create a simple wrapper-"class", that keeps track of mouse-down and up events:
(function () {
var DragDropHandler = {
isDrag: false,
mouseDownHandler: function (event) {
alert("down");
event.stopPropagation();
this.isDrag = true;
},
mouseUpHandler: function (event) {
alert("Up");
event.stopPropagation();
this.isDrag = false;
},
clickHandler: function (event) {
event.stopPropagation();
// Check if we've already received a mouseDown-event. If we have,
// disregard the click event since we want drag-functionality
if(this.isDrag) { return; }
alert("click");
}
};
$(".tree li").click(function(event) {
DragDropHandler.clickHandler.call(DragDropHandler, event);
});
$(".dragHandle").mousedown(function(event) {
DragDropHandler.mouseDownHandler.call(DragDropHandler, event);
});
$(".dragHandle").mouseup(function(event) {
DragDropHandler.mouseUpHandler.call(DragDropHandler, event);
});
})();
This creates a closure and delegates the event handling to the DragDropHandler-object. Note that I've used function.call (the first parameter is the context) to ensure that this refers to the DragDropHandler-object inside its methods. Since we have created an anonymous function that can not be reached from global space, I think it's acceptable to use the DragDropHandler reference inside the wrapper event handlers.
Related
Finding myself in a bit of a strange position where I have to reference the tooltip within an instantiation for all tooltips.
$('body').tooltip({
selector: '[data-toggle="tooltip"]',
html: true,
animation: false,
}).on("mouseenter", function (e) {
e.stopPropagation();
var _this = e.target;
$(_this).tooltip("show");
$(".tooltip").on("mouseleave", function () {
$(_this).tooltip('hide');
});
}).on("mouseleave", function (e) {
e.stopPropagation();
var _this = e.target;
setTimeout(function () {
if (!$(".tooltip:hover").length) {
$(_this).tooltip("hide");
}
}, 300);
});
That being said, how can I:
Reference the actual element that is triggering this jQuery call
Keep the tooltip open while either the actual tooltip or element that generated it are being hovered over?
Here is a link to a JSFiddle prototype:
https://jsfiddle.net/cwv57weu/8/
Within your '.on()' call, you can add an 'event' argument to your anonymous function. This will contain all of the data from the event including the element which triggered the event (it will be referenced as 'target').
}).on("mouseenter", function (event) {
$(event.target).tooltip("show");
})
the event argument contains a ton of data, I would play around with it by console.log(event) within your anonymous function to get a feel as to what data is available to you.
Use event.target.
$('body').tooltip({
selector: '[data-toggle="tooltip"]',
html: true,
animation: false,
}).on("mouseenter", function (e) {
var _this = e.target;
$(_this).tooltip("show");
$(".tooltip").one("mouseleave", function () {
$(_this).tooltip('hide');
});
}).on("mouseleave", function (e) {
var _this = e.target;
setTimeout(function () {
if (!$(".tooltip:hover").length) {
$(_this).tooltip("hide");
}
}, 300);
});
e.target is the actual element that the event originated on, while this is the element that the event listener was attached to (equivalent to e.currentTarget).
Note that because of event bubbling, the event will fire on all the containing elements up to body. You may want to use e.stopPropagation() to prevent bubbling, so you only process the deepest element.
I also changed the mouseleave handler on .tooltip to use .one(). Otherwise, every time you enter something, you'll add another mouseleave handler to all the tooltips, without removing the previous one, and soon there will be thousands of handlers running (this is why it's generally wrong to bind event handlers inside other event handlers). I'm not really sure you need both that mouseleave handler and the one you attach to body.
I have a bit of a head scratcher when it comes to using stopPropagation in javascript. According to many different sources stopPropagation should stop bubbling of the event to parent elements, however, when I use it it seems to stop the event from being called after the first click. I have worked up a very simple bit of code to reproduce the behaviour below:
HTML:
<div id="root">
<div id="top">
<h1>Click Me!</h1>
</div>
</div>
js/jQuery:
var myEvent = document.createEvent("Event");
myEvent.initEvent("boop", true, true);
$("#root").on('boop', function (e) {
alert("root boop!");
});
$("#top").on('boop', function (e) {
// After this is called, this event handler will never fire again.
e.stopPropagation();
alert("top boop!");
});
$("h1").click(function (e) {
$("#top").get(0).dispatchEvent(myEvent);
// I know that $("#top").trigger will prevent the problem, what is wrong with the form above?
});
There is a Fiddle as well.
You dispatch myEvent on which you eventually call .stopPropagation(). Every click thereafter use the same instance of myEvent on which the propagation has been stopped.
You'll need to make a copy of the event before dispatching it if you want to be able to click multiple times.
...or you could rewrite your JavaScript like this:
$("#root").on('boop', function (e) {
alert("root boop!");
});
$("#top").on('boop', function (e) {
e.stopPropagation();
alert("top boop!");
});
$("h1").click(function (e) {
var myEvent = document.createEvent("Event");
myEvent.initEvent("boop", true, true);
$("#top").get(0).dispatchEvent(myEvent);
});
Working JS Fiddle
I want to trigger click event on a element when mousedown occurs. Also, I want to enable this feature for all elements in a html page.
Is it possible with jQuery on Chrome ?
Here's my first attempt;
$.fn.mousedown = function (onclick) {
this.bind("click", function (e) { onclick.call(this, e); });
return this;
};
But this mousedown elements fired after click occurs.
$(document).on('mousedown', function (e) { $(e.target).trigger('click') })
I'm not sure though for what this should be useful.
To prevent the second click (which is the normal click) you have to do some extra work
$(document).on('mousedown', function (e) {
$(e.target).trigger('click').once('click', function (e) {
e.preventDefault();
e.stopPropagation();
});
})
$('#clickableElement').bind({
mousedown: function(e)
{
console.log('mousedown on element');
$(document).bind('mouseup',function(e){
console.log('mouseup caught');
//Do some magic here
$(this).unbind('mouseup');
});
},
mouseup:function(e)
{
//mouseup within element, no use here.
}
});
I'm trying to catch the mouseup event from a mousedown that's released inside or outside of an element. This code almost works, but the problem is the unbind('mouseup') which is unbinding other scripts attached to the mouseup event (jqueryui). If unbind() is not set then the code gets stacked within mouseup event and called x number of times, where x is the times you've mousedowned.
Route 1: is there some kind of self destructing function that calls itself once and destroys?
Route 2: any way to copy/clone the mouseup function prior to inserting the code, then unbind, then set as previous?
Ideally I'd like to keep this code structure for neatness as I have lots of clickable elements, so binding the document.mouseup outside of element.mousedown would be messy.
Here's the Fiddle I forgot to add http://jsfiddle.net/9gFNk/
Can giv your click event a namespace so only that namespaced event gets unbound, and not any others
$(document).on('mouseup.clickableElement',function(e){
console.log('mouseup caught');
//Do some magic here
$(this).off('mouseup.clickableElement');
});
I created a global object to catch mouse events from the document. It's currently set for mouseup only but can be easily expanded for others. The mouseup code is still customizable within the mousedown functions of the clickable elements so it this handy if you have lots of clickable things like I do.
var MouseCatcher=function()
{
this.init=function()
{
var mc = this;
$(document).bind({
mouseup:function(e)
{
mc.mouseup();
}
});
}
this.mouseup=function()
{
return false;
}
}
var mouseCatcher = new MouseCatcher();
mouseCatcher.init();
$('#clickableElement').bind({
mousedown: function(e)
{
console.log('mousedown on element');
mouseCatcher.mouseup=function()
{
console.log('mouseup called from MouseCatcher');
this.mouseup = function(){return false;}
}
},
mouseup:function(e)
{
//mouseup within element, no use here.
}
});
With "on" event its possible, its may not be an exact solution. Please refer this code
$(document).on('mousedown', function() {
$('#clickableElement').css('display', 'none');
$(document).bind('mouseup', function() {
$('#clickableElement').css('display', 'block');
});
});
http://jsfiddle.net/9gFNk/13/
I can't stop the stupid thing from firing off an event when hovering over the children of item.
I only want the event to fire via the div.item element, not the div.itemChild. This is driving me nuts please help.
event.stopPropigation does not work. nor does if(!$(event.source).is('itemChild')), for some reason is() alway returns false.
HTML
<div id="items">
<div class="item">
<div class="itemChild">
</div>
<div class="itemChild">
</div>
</div>
</div>
JS
//on hover event for each post
$('div.item', '#items').live('mouseover mouseout', function(event){
if (event.type == 'mouseover'){
//fire mouseover handler
}
else{
//fire mouseout handler
}
});
Is there a way to stop live from firing when hovering the children of div.item?
By the way the children of div.item cover it completely.
Basically I want this to act like .hover() but bind to things loaded via ajax.
It's not binding to the children. It's bubbling up to the parent.
Also, your syntax isn't correct. This:
$("div.item", "div.items")...
is saying "find me all the divs with class item that are descendants of divs with class of items. But you have no such divs (with class items). You have a div with an ID of items.
Combining all this try:
$("#items div").live("mouseover mouseout", function(event) {
if ($(event.source).hasClass("itemChild")) {
return false;
} else if (event.type == "mouseover") {
...
} else {
...
}
});
Or, alternatively:
$("#items > div.item").live("mouseover mouseout", function(event) {
if (!($this).is("div.item")) {
return false;
}
...
});
Basically, there are many ways to skin this cat but like I said in the first sentence, you have to understand that events bubble up until the handlers stop propagation, either directly (by calling event.stopPropagation() or by returning false from the event handler, which is equivalent to event.stopPropagation(); event.preventDefault();).
Also, if you're doing mouseenter and mouseout you might as well just use the hover() event that does both of those:
$("#items > div.item").live("hover", function(event) {
// mouseenter
}, function(event) {
// mouseout
});