I'm experiencing a strange issue in firefox where the click event is raised on the document node when right-clicking a child node.
This code illustrates the issue: http://jsfiddle.net/RyDZU/5/
Updated version : http://jsfiddle.net/RyDZU/10/
$(document).on("click","span",function(e) {
console.log('span');
console.log(e.isPropagationStopped());
});
$(document).on("click","div",function(e) {
console.log('div');
console.log(e.isPropagationStopped());
e.stopPropagation();
console.log(e.isPropagationStopped());
});
$(document).on("click",function(e) {
console.log('body');
console.log(e.isPropagationStopped());
});
HTML:
<div><span>Test</span></div>
If you right-click the word "test" the word "body" is printed in the console on firefox (21). Not in IE 10 / Chrome.
How can i prevent this event from being raised in Firefox?
This does not work:
$("body").on("click", "span", function(e) {
e.preventDefault();
e.stopPropagation();
});
I'm running into the same issue. I have a fiddle where if you left click in the green square the event is handled by both handler2 (on the div) and handler3 (on document). However if you right click, only handler3 is called, which means there isn't an easy way to stop propagation on right clicks in the div.
jsfiddle
// requisite jsfiddle code snippet
function handler2() {
console.log('in handler2');
}
function handler3() {
console.log('in handler3');
}
$(document).ready(function () {
$('#block2').on('click', handler2);
$(document).on('click', handler3);
});
I also tried playing around with the settings dom.event.contextmenu.enabled and services.sync.prefs.sync.dom.event.contextmenu.enabled, but they had no effect on this behavior.
This can be fixed by using event.which to check which mouse button was pressed (from the event listener attached to the document). See https://stackoverflow.com/a/12430795/1170489.
Make
$(document).on("click",function(e) {
console.log('body');
console.log(e.isPropagationStopped());
});
the first handler in your script. When you do it your way, the document click handler is hiding the span and div handlers.
Related
I have this function inside my js:
$(window).load(function() {
$( ".jp-playlist, .jp-play").on("click", function(e){
e.preventDefault();
e.stopPropagation();
window.parent.$("iframe[id^='iframe']:not(#iframe_"+playerNumber+")").contents().find(".jp-stop").click();
});
});
There is a problem in Firefox. When I click element with class jp-play or jp-playlist whole view jumping to the last element on the page which is triggered by this function.
Any idea how to fix this?
I have a masonry layout with each cell is infact a hyperlink requiring a hover state to be shown.
On ipad (as predicted) the hover states did not display. The client has requested that the links should now need two clicks: once to display the hover state, and a second click to engage the hyperlink - So I used this bit of javascript:
$(document).ready(function() {
$('.my_button').bind('touchstart touchend', function(e) {
e.preventDefault();
$(this).toggleClass('hover_effect');
});
});
The problem now is that on ipad the hover states now display (which is great), but the second click is being ignored and does nothing.
You can view the live site at http://mayce.derringer.com.au/residential/
The problem now is that on ipad the hover states now display (which is
great), but the second click is being ignored and does nothing.
With
e.preventDefault();
you prevent the default behaviour so the click/touch will never be able to follow the link. Try like so
$(document).ready(function() {
$('.my_button').bind('touchstart touchend', function(e) {
if($(this).hasClass('hover_effect') {
return; // skip rest of code, so default will happen
// which is following the link
}
e.preventDefault();
$(this).addClass('hover_effect'); // no reason to toggleClass
// cause the seccond click/touch should always go to destination
});
});
Now probably you want it though that if click/touch on a different $('.my_button') you need to remove the hover_effect to all the other my_button(s) so add
$('.my_button').not(this).removeClass('hover_effect');
like so
$(document).ready(function() {
$('.my_button').bind('touchstart touchend', function(e) {
$('.my_button').not(this).removeClass('hover_effect');
if($(this).hasClass('hover_effect') {
return; // skip rest of code
}
e.preventDefault();
$(this).addClass('hover_effect'); // no reason to toggleClass
// cause the seccond click/touch should always go to destination
});
});
I haven't tried the code, but it should work. Let me know if it doesn't.
A little bit more research, and I have come up with this solution which works:
jQuery(document).ready(function(){
$('.middle').bind('touchstart touchend', function(e) {
//This will return true after the first click
//and preventDefault won't be called.
if(!$(this).hasClass('nav_returnlink'))
e.preventDefault();
$(this).addClass('nav_returnlink');
});
});
I am new to JQuery Development. I am facing a issue with the onblur event, while i am trying to make a custom menu for my website. could any one help me with this please.
Please find ths JS fiddle JS Fiddle
$(document).ready(function () {
$('#showmenu').click(function (e) {
e.preventDefault();
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
});
$('#showmenu').blur(function (e) {
$('#serviceMenu').hide();
});
});
The issue is that the show/hide div mechanism is based on a <a> tag. on clicking <a> the menu is toggling fine. i also want menu to toggle, when the user clicks anywhere outside the menu and the appearing div. In the fiddle i have added onblur() event for the anchor, that is making my sub links inside the div trigger onblur() event of main anchor, and hiding the menu. I tried to block event.propagation(), but its not working for me.
The problem here is, that the blur event is called, BEFORE you click on a#serviceMenu
You also should learn how the event-propagation works: Direct and delegated events
I updated your fiddle (with some comments): http://jsfiddle.net/M4LJh/7/
$(document).ready(function () {
$('#showmenu').on('click', function (e) {
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
return false;
});
// prevent clickEvent to bubble up to #showmenu
$('#serviceMenu a').on('click', function(e){e.stopPropagation();});
// hide #serviceMenu on bodyClick
// - anywhere but an element with propagation stopped event
$('body').on('click', function (e) {
$('#serviceMenu').hide();
return false; // e.stopPropagtaion(); + e.preventDefault();
});
});
http://jsfiddle.net/msNhr/
When you go over "aaaaa" an overlay is display, when you try to select something from the select within the overlay closes.
How do I get this right?
The overlay should only close if the actual overlay area is left.
Thanks!
see this fiddle: http://jsfiddle.net/msNhr/3/ (tried on Fx14 and Ch 21.0.1180.57)
I've just stopped the propagation of mouseleave event so it won't reach the overlay
relevant js
$(function() {
$('#a').mouseenter(function() {
$('#overlay').show();
});
$('#overlay').mouseleave(function() {
$(this).hide();
});
$('#overlay select').mouseleave(function(ev) {
ev.stopPropagation()
});
});
Possibly a duplicate of Select triggers MouseLeave event on parent element in Mozilla Firefox.
An alternative is to check if the relatedTarget on the event object is null on mouseleave.
See this fiddle: http://jsfiddle.net/kv0mndeg/1/
I have a div that hides whenever you click outside of it but I'm having some trouble getting certain links inside the div to work (and not hide the div).
$(document).click(function() {
fav.hide();
});
theDiv.click(function(e) {
e.stopPropagation();
});
That is what I have for the whole clicking outside and closing event. Heres the thing: I have two types of links in my div, one regular link and another which is a javascript one. The regular one redirects OK but the javascript one doesn't do anything.
Could somebody help me out? Thanks.
EDIT:
Here are the bits of my code that might help out
var fav = $('#favorites');
// Open & close button
$('#favorites_a').click(function(e) {
e.stopPropagation();
e.preventDefault();
fav.toggle();
});
$('a.c',fav).live('click', function(e) {
alert('hey');
});
$(document).click(function() {
fav.hide();
});
fav.click(function(e) {
e.stopPropagation();
});
HTML (built after page load):
<div id="favorites">
<div class="wrap">
<ul><li>AB</li></ul>
</div>
</div>
This could be a problem with the live() click event handler. When you use live the event handler is actually attached to the document. So the event needs to bubble up to the document, but your click event handler on fav prevents bubbling up.
It works with delegate though:
fav.delegate('a.c', 'click', function(e) {
alert('hey');
});
Here, the event handler is added to fav.
DEMO
I think your code for fav is preventing the 'B' link from working. Instead of .live(), try:
$('a.c').click(function() { ... });
instead.