I'm having issues handeling some drag events... What I'm working on is a draggable control panel, and I want to disable click events during the drag. Is there a way to globally disable click events during the drag? Another issue I've found is that when someone starts the drag over a link or image the you get a psuedo-element drag of the image/link and then the control panel is stuck to the mouse because the original drag event got eat up somewhere.
any help or direction would be nice.
this is what i'm working with
dragElement.mousedown(function(event) {
sticker.css('cursor', 'move');
if ((event.button == 1 && window.event != null) || event.button == 0) {
//second catch here in case user stops drag and re-initiates drag
//without moving away from sticker
document.onselectstart = function() {
return false;
};
startDrag(event);
}
});
$(document).mousemove(function(event) {
handleDrag(event);
});
dragElement.mouseup(function() {
endDrag();
$(document).unbind('mousemove', handleDrag);
});
To the link or image elements, try to prevent their default behavior by original JavaScript
event.preventDefault(); //standard browser
or
event.returnValue=true; //IE
or just a function in jQuery for both
event.preventDefault();
Related
I need to make a webpage scrollable only by scrolling bar. I have tried to find how to catch scroll bar event, but as i see it is impossible. Currently i use this functions:
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
function wheel(e) {
preventDefault(e);
}
function disable_scroll() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
}
But they are not very useful in my situation, because they block all scroll events. Do you have any ideas? I am thinking about it 3 days already and i didn't find any answer (and questions also). Thanks!
Prevent the window from scrolling with mouse wheel:
As document level wheel event listeners are treated as Passive, we need to mark this event listener to be treated as Active:
window.addEventListener("wheel", e => e.preventDefault(), { passive:false })
If the content of a <div> (or other element) is scrollable, you can prevent it like this:
document.getElementById('{element-id}').onwheel = function(){ return false; }
More info about scrolling intervention and using passive listeners to improve scrolling performance.
Outdated Method:
window.onwheel = function(){ return false; } // Old Method
more info (thanks #MatthewMorrone)
jQuery solution to prevent window scrolling with mouse wheel:
$(window).bind('mousewheel DOMMouseScroll', function(event){ return false});
If you want to prevent scrolling with mouse wheel in a single DOM element, try this:
$('#{element-id}').bind('mousewheel DOMMouseScroll', function (e) { return false; });
The DOMMouseScroll event is used in Firefox, so you have to listen on both.
I'm currently using this and it works fine. Scrolling using the bar works fine, but mouse wheel won't work.
The reason i'm doing it this way is that I have custom code to scroll the way I want, but if don't add any code it will just don't scroll on wheel.
window.addEventListener('wheel', function(e) {
e.preventDefault();
// add custom scroll code if you want
}
I want my graph nodes not to be unselected when the user taps on the background.
From the docs of cytoscape.js I read
Gestures
Cytoscape.js supports several gestures:
...
Tap background to unselect : desktop
...
All gesture actions can be controlled by the programmer, toggling them on or off whenever needed.
I however cannot find any option to toggle that gesture off. I tried to hook up the tap event and tried to cancel the event, but to no success.
cy.on('tab', ev => {
if (ev.target === cy) {
ev.preventDefault();
ev.originalEvent.preventDefault();
}
});
How to prevent unselection on tab background?
If anyone is still looking for a solution, I found this closed(answered) issue on the Cytoscape.js GitHub. Simon Golm's solution worked for me:
// Prevents the unselection of nodes when clicking on the background
cy.on('click', (event) => {
if (event.target === cy) {
// click on the background
cy.nodes().unselectify();
} else {
cy.nodes().selectify();
}
});
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);
}
};
Currently I am developing a website for ipad Safari
I used
addEventListener('touchmove', function(e) { e.preventDefault(); }, true);
to prevent the background moving when dragging the content. The problem is when I allow some element to drag
addEventListener('touchmove', function(e) {
//alert (e.target.id);
if ( e.target.className != 'issues' && e.target.id != 'dialog' && e.target.id != 'issuesBox')
e.preventDefault();
return false;
}, true);
when I drag the element, it will drag the background too , how to fix this problem? I observe that this problem may caused by taphold ,Thanks.
Are you trying to prevent scroll on some element? Prevent default of both touchstart and touchmove events then. Here's doc from apple.
In my experience, prevent default on touchstart event is enough, e.g.,
$(document).on('touchstart', function (evt) {
evt.preventDefault();
});
This is for an HTML5 canvas game that I am making. In the game, there is a character that has a gun, he can shoot it and reload it. I would like the player to use the left mouse button for shooting and the right mouse button for reloading.
What I need is that when ever I click the left mouse button, a variable in my player object(Player1.isLeftClick) becomes true, and when I let go of the button the same variable becomes false. The same thing should also happen with the right mouse button, but with another variable(Player1.isRightClick). I also want it to be capable with all the most popular browsers(Chrome, Firefox, Explorer, etc.). I must also be in pure JavaScript with no libraries like jQuery!
I already achieved this with keyboard events, but I need this with the mouse events.
If it helps, I already have event handlers for keyboard up and down and mouse movement. These are made in the init function that initializes the game when the images are loaded.
document.addEventListener('mousemove', mousePos, false);
document.addEventListener('keydown', checkKeyDown, false);
document.addEventListener('keyup', checkKeyUp, false);
I also have variable called mie that is true if the used browser is Internet Explorer and false for other browsers.
You want to use the e.button property to check which mouse event was called. The value for the left mouse button being clicked is different in IE. Your code would look like this:
var left, right;
left = mie ? 1 : 0;
right = 2;
document.body.addEventListener('mousedown', function (e){
if(e.button === left){
Player1.isLeftClick = true;
}
else if(e.button === right){
Player1.isRightClick = true;
}
}, false);
document.body.addEventListener('mouseup', function (e){
if(e.button === left){
Player1.isLeftClick = false;
}
else if(e.button === right){
Player1.isRightClick = false;
}
}, false);
Demo