I have an image gallery with various controls. One of the controls is a basic delete function, to delete you click and hold for approx 1 second to get a confirmation asking if you want to delete. All works fine, it's just that on mobile devices it often causes the "Save Image As, etc" menu to pop up which has to be closed before the intended action can be performed.
I've read about various fixes but none of them seem to work with current versions of Chrome mobile on my Galaxy S5, and the most recent answer I could find was from 2013.
I found one saying that the context menu was it's own function, so I tried something like this:
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
But it did not prevent the context menu from showing on my S5. As I said, I'm hoping to find a solution to prevent it from coming up on certain items, not the entire window.
Thanks to Tasos for the answer
document.getElementById('yourElement').oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation(); // not necessary in my case, could leave in case stopImmediateProp isn't available?
event.stopImmediatePropagation();
return false;
};
I (re)post the answer here because at first, I haven't seen it was in the question :)
So juste use this code, with stopImmediatePropagation :
document.getElementById('yourElement').oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation(); // not necessary in my case, could leave in case stopImmediateProp isn't available?
event.stopImmediatePropagation();
return false;
};
Related
Chrome :
Following code is working in Chrome.
$('.links').click(function(e) {
if(e.which == 2) {
console.log(e.which); // prints 2
//e.preventDefault();
//e.stopPropagation();
return false;
}
});
Firefox :
Since above code doesn't catch middle button / mouse wheel click event in firefox, I tried following which is able to catch mouse wheel click event.
$('.links').mousedown(function(e) {
if(e.which == 2) {
console.log(e.which); // prints 2
//e.preventDefault();
//e.stopPropagation();
return false;
}
});
Above code prints 2. But return false; is not working.
When I replaced console.log with alert then it works. But I can't & don't want to use alerts.
I tried mouseup, mousewheel events also. But it didn't work.
I tried attachEvent also but, I got an error(attchEvent is not a function).
I am using below mentioned js files :
jQuery-1.10.2.min.js
jquery.easyui.min.js
jquery-ui.js
jquery.ui.core.js
You can refer below links for more clarity.
jsfiddle.net/nilamnaik1989/vntLyvd2/3
jsfiddle.net/nilamnaik1989/2Lq6mLdp
http://jsfiddle.net/nilamnaik1989/powjm7qf/
http://jsfiddle.net/nilamnaik1989/q6kLvL1p/
Following are some good links. But anyhow it doesn't solve my problem.
event.preventDefault() vs. return false
event.preventDefault() vs. return false (no jQuery)
http://www.markupjavascript.com/2013/10/event-bubbling-how-to-prevent-it.html
I need your valuable inputs.
All click default actions should be cancelable. That's one of the points of this important event. However, certain browsers have exceptions:
IE 5-8 won't prevent the default on text inputs and textareas.
IE9/10 & Opera incorrectly un-check radio buttons when you click on another radio in the same group. It correctly doesn't check the new radio.
IE 5-8, Firefox, & Opera won't prevent the default on select boxes.
Firefox & Chrome feel that one radio button must be checked. If all are unchecked they’ll check the first one you click on, even if the default is being prevented.
See Events - click, mousedown, mouseup, dblclick for some more information.
I had the same issue with firefox, related with
preventDefault();
Everything was working well in Safari, Chrome, Opera and even in IE9 (not kidding)
But, after a lot of reading, I saw that the site was using and old jquery version (1.10), then updated to the latest one (2.1.4) the action was canceled even in Firefox.
Another thing to consider is that I used a variable named "keyPressed" like:
var keyPressed = event.keyCode || event.which || event.charCode
So it was easy for each browser to recognize the key event.
Hope this help!
I have faced the similar problem in FF on middle click.
The following script fixed me the issue and it works fine in FF as well.
$(document).on('click', $(".content"), function(e) {
if(e.button==1) {
e.preventDefault();
return false;
}
})
We have a select2 dropdown in a row (just a div) and we need to be able to click that entire row to trigger the dropdown. I have no problem showing it, but trying to hide it has become a problem, and I'm wondering if my logic is flawed somewhere. select2 AFAIK doesn't have a toggle method on the version we're on, so I have to manually use it's open and close methods. This is what I tried.
$('[data-variable-type=select]').on('click', function(e){
e.stopPropagation();
var _dropdown = $(this).find('div.interface_dropdown');
if( _dropdown.hasClass('select2-dropdown-open') ) {
$(this).find('select.interface_dropdown').select2('close');
}
else {
$(this).find('select.interface_dropdown').select2('open');
}
});
This causes it to open properly, but when you click to close it, it closes on mousedown but reappears on mouseup.
Is there someway I can get it toggling properly?
Will you post relevant HTML? It's hard to understand what you're doing without seeing content.
$('[data-variable-type=select]').on('click', function(e){
e.stopPropagation();
var _dropdown = $(this).find('div.interface_dropdown');
if( _dropdown.hasClass('select2-dropdown-open') ) {
_dropdown.removeClass('select2-dropdown-open');
_dropdown.select2('close');
} else {
_dropdown.select2('open');
_dropdown.addClass('select2-dropdown-open');
}
});
It looks like you forgot to add/removethat class, maybe this will work better? Again, I'm kind of feeling around in the dark here without seeing your content.
if( _dropdown.hasClass('select2-dropdown-open') ) {
$(this).find('select.interface_dropdown').select2('close');
}
in later versions of select2 (3.3+ iirc) this will never get triggered because when opened select2 creates a transparent mask over the entire browser and listens to click events. when the mask is clicked currently opened select2 is closed. this was the only reliable way to close a select2 when the user is ready to do something else.
The proper way is:
$('select').data('select2').toggleDropdown()
I am making an HTML 5 game which requires the use of right click to control the player.
I have been able to disable the right click context menu by doing:
<body oncontextmenu="return(false);">
Then it came to my attention that if you hold shift and right click, a context menu still opens in Firefox!
So I disabled that by adding this JS as well:
document.onclick = function(e) { if(e.button == 2 || e.button == 3) { e.preventDefault(); e.stopPropagation(); return(false); } };
However, if you hold shift, and then double right click in Firefox it still opens!
Please tell me how to disable this bloody thing once and for all (I'm even willing to revert to some obscure, hacky, and unpractical solution, as long as it works).
You will never be able to entirely disable the context menu in all cases, as firefox has a setting that allows the user to tell the browser to ignore such hijinx as you are trying to pull.
Note: I'm on a mac, but this setting is in pretty uch the same place over all platforms.
That being said, try event.preventDefault() (see Vikash Madhow's comment on this other SO question:
How to disable right-click context-menu in javascript)
There is actually example in official documentation that blocks directly context menu event:
document.oncontextmenu = function () { // Use document as opposed to window for IE8 compatibility
return false;
};
window.addEventListener('contextmenu', function (e) { // Not compatible with IE < 9
e.preventDefault();
}, false);
document.ondblclick = function(e) {
if(e.button == 2 || e.button == 3) {
e.preventDefault();
e.stopPropagation();
return(false);
}
};
I have this:
function dontMove(event) {
// Prevent page from elastic scrolling
event.preventDefault();
}
&
<body ontouchmove="dontMove(event);">
This, on the ipad, stops it from being draggable and does not allow that grey background the ipad has when you drag a whole page around to show up.
I have seen on another website that its possible to reverse that in another div, so that div is completely draggable again.
Does anyone know how to reverse it?
I have also tried using this to prevent it (in the document.ready):
document.ontouchmove = function(e){
e.preventDefault();
}
& this to enable it:
function doTouchMove(state) {
document.ontouchmove = function(e){
return state;
}
}
Then I put this to activate it.
<img ontouchmove="doTouchMove(state);" src="../jpeg/pages/01.jpg" class="touch"/>
This didn't seem to work
Is there anything wrong with this?
Or any other way that might work?
This is exactly why bubbles is slightly better(at least in my opinion).
bubbles is cross browser, so you should be able to replace.
e.preventDefault()
with
e.bubbles = false;
and then latter in your code, you could potentially reset bubbles to true.
If the above isn't an option then just ignore. :D
An alternative(if you are just working with an iPad) is to just reverse how the DOM works.
document.addEventListener('click', function(){}, true );
This will force the event to work in the other direction.
Document click execute
|
|
v
Element click execute
try this post, HTML with event.preventDefault and erase ontouchmove from body tag.
Mine looks like this
<script>
// Get touch move enevt from IOS
document.ontouchmove = function (event) {
if (!event.elementIsEnabled)
event.preventDefault();
};
// Get touch move enevt from IOS
function enableOnTouchMove(event) {
event.elementIsEnabled = true;
};
</script>
then enable ontouchmove on every tag you want. ie:
<div ontouchmove="enableOnTouchMove(event)" id="listing">
I managed to solve it with
$('#form1').unbind('submit').submit();
You can solve it by preventing the event only if it comes from the body:
document.ontouchmove = function(event){
if(event.target.tagName == "BODY"){
event.preventDefault();
}
}
In IE, for example, when you press the left button on an image and keeping it pressed try to move the mouse, the drag n' drop action is taking place; how could I prevent this default action so that doing that way nothing will happen. I am building an image cropper, so you should understand why I need that. I am not much interested in knowing how to do so with help of jQuery or the like. As I study JavaScript, I prefer coding in plain-vanilla JS. It is important for me to learn how to make it cross-browser if there are any differences for such a thing.
Just like August's, but plain JS:
var imgs = document.getElementById("my_container")
.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onmousedown = function () {
return false;
};
}
If you want to do it 'new-style', google for 'addEventListener()' (all browsers but...) and 'attachEvent()' (...IE) methods.
Here's one in jQuery:
$("#my_container img").mousedown(function () {
return false;
});
http://www.google.com/search?q=cross+browser+event+hooking will probably teach you everything you need to know about cross browser event hooking. I don't know how to hook events without a framework, because that's an edge case IMHO. In The Real World (tm), you'll always use a framework.
The core here is that you have to stop the mousedown event from running. This will make drag and drop impossible, if you hook the event on text you won't be able to select that text, and so on.
If you're building an image cropper, you're going to put some kind of overlay on the image, probably a relatively or absolutely positioned div, inside of which you will "draw" a rectangle when the user clicks, holds and drags. This will make it impossible for the user to drag the image itself, so no fix for that is needed.
Even if you do not use an overlay, you are still going to hook the mousedown event - there is no other way to implement a JS cropper as far as I know. Hooking that event will by itself be enough to prevent the browser from initiating a drag and drop action.
I'm using code similar to the following to prevent dragging, which has the advantage of targetting actual drag-related events rather than the generic mousedown (which could conceivably have side-effects). Works in all the mainstream browsers except Opera.
function cancellingEventHandler(evt) {
evt = evt || window.event;
if (evt.preventDefault) {
evt.preventDefault();
} else if (typeof evt.returnValue !== "undefined") {
evt.returnValue = false;
}
return false;
}
function disableDragging(node) {
node.ondragstart = cancellingEventHandler;
node.ondraggesture = cancellingEventHandler;
}
disableDragging( document.getElementById("anImage") );