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.
Related
Is there any way to distinguish a click event that keeps it distinct from when the user actually ends up dragging the mouse? I have some text that is filled with links, and want it to be easy for the user to click and drag over the text to select some of the text, but the links make this difficult, as the browser interprets it as them trying to drag the link, rather than select some text. So my solution to this problem was to use an <a onClick=...> rather than <a href>, as the browser lets me drag the mouse over that just like normal text.
However, this only seems to work if I single click and drag the mouse over two separate <a> tags: if the selection is entirely internal to an <a> tag the event still fires, and if I try to double-click-drag over text it also fires.
So I'm wondering if there's a way to do this other than using onMouseDown and onMouseUp and manually keeping track of the delays to determine what the user is doing.
I'm aware that some browsers offer the option to drag through links by holding a modifier key, but I'm curious if there's a simpler way to do this that wouldn't require users to be aware of that functionality.
Opinion piece
Whilst this might be doable, consider accessibility and how it'll fit into your projects needs. Navigation using onclick doesn't provide the same accessibility benefits, plus it requires a lot of reinventing things the browser can do for free.
I know that mobile devices typically allow a long press to access a text-select/context menu combo; on desktop, it'll vary per device/browser.
Actual answer
The only "detect click only" implementation I can think of would be using three handlers with mousedown, mouseup and mousemove. Untested code ahead!
let clicked = false;
document.addEventListener('mousedown', e => { clicked = true; });
document.addEventListener('mousemove', e => { clicked = false; });
document.addEventListener('mouseup', e => {
if(clicked) {
// The mouse was clicked without moving it around!
// Do your "only clicked" logic in here.
}
// Reset this back to false for next time
clicked = false;
});
Thanks to #Connor Deckers for idea and for this site
let clicked = false;
let dbclicked = false;
let move = false;
document.addEventListener('mousedown', e => { clicked = true; });
document.addEventListener('mousemove', e => { move = true; });
document.addEventListener('dblclick', e => { dbclicked = true; });
document.addEventListener('mouseup', e => {
if(clicked && !move && !dbclicked) {
// The mouse was clicked without moving it around!
// Do your "only clicked" logic in here.
console.log("clicked without drag and not a double click ");
}
if(dbclicked) {
// The mouse was double clicked
// Do your "double clicked" logic in here.
//console.log("dbclicked");
}
// Reset this back to false for next time
clicked = false;
move = false;
dbclicked = false;
});
I'm trying to make a zoomable image block in an HTML page using javascript.
Now zooming in is finished by capturing Doubleclick event and some simple functions.
Problem is here that I have some elements (div tags like tile) and want to have a function called when right clicked on some of them.
How can I do this?
You can use the contextmenu event:
<div oncontextmenu="javascript:alert('Right Click Performed!');return false;">
Right click on me!
</div>
And then add a listener:
el.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
alert('Right Click Performed!');
return false;
}, false);
javascripts event.button function will give you the mouse button you clicked.
<img onMouseDown="alert(event.button)" src="yourimage" />
right click should return 2 but best check each browser
So I have my controls set up as space bar to jump but I want my HTML5 game to work everywhere so I need to change it to mouse/touch. Mouse/touch doesnt have a keycode so whats the most optimal way to do it for this code? Do I need to do mouse and touch separately?
if (KEY_STATUS.space && player.dy === 0 && !player.isJumping) {
player.isJumping = true;
player.dy = player.jumpDy;
jumpCounter = 12;
assetLoader.sounds.jump.play();
}
// jump higher if the space bar is continually pressed
if (KEY_STATUS.space && jumpCounter) {
player.dy = player.jumpDy;
}
You are talking about touch events in JavaScript. You will have to add an event listener and catch if the user touches screen. Here you can find a well documented tutorial in how to use it on both touchscreen and mouse.
Check out the first answer, you will have to do it like that. You will have to add an event listener on the canvas itself, like the guy did it on myDiv.
Here is an example I wrote (don't mind me being weird, please):
<div id="fakeCanvas">
Click or touch me!
</div>
<script type="text/javascript">
var fakeCanvas = document.getElementById('fakeCanvas');
function methodToInvokeForClick() {
alert('I have been clicked!');
}
function methodToInvokeForTouch() {
alert('I have been touched!');
}
fakeCanvas.addEventListener("click", methodToInvokeForClick, false);
fakeCanvas.addEventListener("touchstart", methodToInvokeForTouch, false);
</script>
I think you can take it over from now. What I did to the fakeCanvas div, you will have to do the same to your canvas by giving it an id etc. Good luck!
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
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();
}
}