I have an HTML5 canvas that users interact with by clicking (or tapping).
$(function() {
var canvas = $('#annotations');
canvas[0].addEventListener('mousedown', clickCanvas);
canvas[0].addEventListener('touchstart', clickCanvas);
});
function clickCanvas(e) {
markLocation(e);
drawCanvas();
e.preventDefault();
}
This works as expected. However, on mobile devices if you tap and drag this registers a click at the point where the tap started (this makes sense because it's hooked up to touchstart). The page does not scroll as it normally does when you touch-drag outside the canvas.
When dragging, I would like the tap to be ignored and the whole page scrolled instead.
I was able to resolve this by:
Removing e.preventDefault();
Hooking up canvas[0].onselectstart = function () { return false; } to prevent text being selected when the canvas is double-clicked (this was what e.preventDefault() did in the first place)
Replacing touchstart with touchend
Related
I created a JavaScript page to collect user's click/tap data. However, I don't want user to use more than one finger to tap on the screen. Currently, I have no way to filter out those multi clicks. I would like to totally dismiss the taps by more than one finger. What can I do? It's a web-page and I need things to be done by JavaScript.
Thanks,
You could check the touches field in the event listener to see if more than one touch point was part of the touch event.
document.addEventListener('touchstart', (ev) => {
if (ev.touches.length > 1) {
ev.preventDefault();
ev.stopPropagation();
document.body.style.background = 'red';
return false;
}
document.body.style.background = 'green';
return true;
});
I am using canvas with html to draw on the screen. The thing I need is to draw with the left click only, and right click just do nothing. I tried the following:
canvas.oncontextmenu = e => {
e.preventDefault();
e.stopPropagation();
}
It disabled the right click menu, but I am able to press the canvas (and eventually draw on it) with both left and right click. What am I missing?
try:
<canvas oncontextmenu="return false;"></canvas>
You can use this:
canvas.bind('contextmenu', function(e){
return false;
});
Using Jquery:
$('body').on('contextmenu', '#myCanvas', function(e){ return false; });
Try the following:
const canvas = document.getElementById('myCanvas');
canvas.oncontextmenu = () => false;
where myCanvas is eventually the ID given to the canvas, i.e.
<canvas id="myCanvas"></canvas>
Try this:
canvas.addEventListener('mousedown', (event) => {
if (event.which !== 1) {
event.preventDefault();
}
});
It should also disable context menu from appearing. Clicking the middle mouse button won't give any effect too.
event.which contains the index of mouse button that is pressed. 1 is the left button, 2 is the middle, 3 is the right one.
preventDefault() prevents default browser behaviour from being executed (such as opening context menu etc, it can be applied in many situations).
By the way, stopPropagation() is used to stop such events (as context menu opening, in this case) from being executed at child elements. <canvas> doesn't have child tags, so it can be omitted.
I am using three.js to allow users to create and edit a 3D model that involves using the scroll-wheel/two finger function, to zoom in and out. I want a second section of the page that is off the screen by default but the user can scroll down to see it. Preferably, this will be done only using the scroll bar, while the scroll-wheel can still be used.
For performance reasons, I'd prefer not to have to use something such as vue.js. Users provide data that remains on their computer that I'm using in both sections. This prevents me from just placing the data on another screen.
Overflow:hidden is out of the question because then I can not scroll to the bottom portion.
I tried using PreventDefault with several different EventListeners but none of them worked properly.
Below is the function that determines the size of the window and should include a function or the code to prevent scrolling.There aren't particular elements that shouldn't scroll, all of them shouldn't.
function onWindowResize() {
var viewWidth;
var viewHeight;
viewHeight=window.innerHeight-315;
//For Mobile
if(!UIactive && innerWidth < 640){
viewWidth= window.innerWidth;
//For Computer & Tablet
} else {
viewWidth= window.innerWidth -317;
if(window.innerHeight < 700){
viewHeight=window.innerHeight-52.67;
//Disable Scrollwheel
window.addEventListener('wheel',function(event){
//mouseController.wheel(event);
event.preventDefault();
}, false);
}
}
camera.aspect = (viewWidth) / (viewHeight);
camera.updateProjectionMatrix();
renderer.setSize(viewWidth, viewHeight);
UI.style.height= (viewHeight+'px');
}
Edit: I tried using the answer to a similar question. This did not achieve the desired result. I changed the code to be both window... and document... and a console.log statement included works but I can still scroll.
this.canvas.addEventListener('wheel',function(event){
mouseController.wheel(event);
return false;
}, false);
I then proceeded to try using preventDefault again and recieved the following error
Unable to preventDefault inside passive event listener due to target being treated as passive
Google Chrome docs say that,
With this intervention wheel/touchpad scrolling won't be blocked on document level wheel event listeners that do not need to call preventDefault() on wheel events.
Thus, you should apply the onmousewheel event on a specific div like so:
<div id="ScrollableDiv" style="height : 900px;background-color : red">
</div>
function stop(){
return false;
}
var div = document.getElementById('ScrollableDiv');
div.onmousewheel= stop;
Please refer this working fiddle.
I have hooked up a simple long touch function that after 500ms uses the "open" API command to open the context menu. The menu opens. However, on "touchend" the menu disappears. It only stays if I touchmove over the context menu before "touchend". Is there a way to prevent this sort of behaviour? From the source code, only a "touchstart" in a different part of the dom should trigger a close event.
Code is below, in case useful. Not that a delegate of tr is required by my context menu - to explain the targetTr variable use below.
var mobDevice_onLongTouch,
mobDevice_touchTimer,
mobDevice_longPressDuration = 500; //length of time we want the user to touch before we do something
//handle long press on the datatable
var touchArea = document.querySelector("#table");
touchArea.addEventListener("touchstart", touchAreaTouchStart, false);
touchArea.addEventListener("touchend", touchAreaTouchEnd, false);
function touchAreaTouchStart(e) {
var targetTr = $(e.target).closest('tr');
mobDevice_touchTimer = setTimeout(function () { touchArea_onLongTouch(targetTr) }, mobDevice_longPressDuration)
};
function touchAreaTouchEnd(e) {
if (mobDevice_touchTimer) {
clearTimeout(mobDevice_touchTimer) //reset the clock
}
};
function touchArea_onLongTouch(target) {
$('#table').contextmenu('open', target);
};
I solved this. ContextMenu was working fine, but the DOM control I was touching on registered a change event (to highlight a table row) on touchend. So the context menu popped up during touch and hold, then got cleared by a DOM change at touchend.
The solution was to manually add the highlight table row event to touchstart and preventDefault on touchend (when the touch target was inside the table)
I've created a fiddle to reproduce the problem.
https://jsfiddle.net/rvwp47Lz/23/
callback: function (key, option) {
console.log("You clicked the test button", this);
// Need the iframe contents to regain focus so the mouse events get caught
setTimeout(function () {
$iframe[0].contentWindow.focus();
}, 100);
}
Basically, what I want to happen is the mouse move events to be caught after closing the context menu.
I can call focus on the iFrame's body or document but it doesn't seem to have any effect.
After you right click one of the items within the iframe and select an item, the mousemove event on the iframes body is no longer called (you can also notice that the hover CSS effect on the items are no longer working).
Ideas?
After some debugging and playing around with jQuery.contextMenu's code it seems the issue actually comes from the itemClick function. I added comments to the code and will add an issue to their github for a possible fix (unless there's some reason they're disabling default here)
// contextMenu item click
itemClick: function (e) {
var $this = $(this),
data = $this.data(),
opt = data.contextMenu,
root = data.contextMenuRoot,
key = data.contextMenuKey,
callback;
// abort if the key is unknown or disabled or is a menu
if (!opt.items[key] || $this.is('.' + root.classNames.disabled + ', .context-menu-submenu, .context-menu-separator, .' + root.classNames.notSelectable)) {
return;
}
// This line is causing the issue since it's preventing the default actions which puts
// mouse events back into place. Chrome must disable mouse move events when the contextmenu event
// gets triggered to improve performance.
//e.preventDefault();
e.stopImmediatePropagation();