Is touchstart the pendant to click?
If yes, what is it for mousedown? If not what is it then for click?
mousedown = touchstart
click = ?
mouseup = touchend
or
mousedown = ?
click = touchstart
mouseup = touchend
Are mousedown and similar events consistently triggered on mobile devices?
Actually the click is mousedown -> keep focus on element -> mouseup (click is dispatched together with mouseup.
The same applies to touchstart and touchend, click is dispatched with touchend.
Look at following example to get thing clearer:
<html>
<head>
</head>
<body>
<button id="test">test</button>
<script>
document.getElementById("test").addEventListener("mousedown", () => {
console.log("down");
});
document.getElementById("test").addEventListener("click", () => {
console.log("click");
});
document.getElementById("test").addEventListener("mouseup", () => {
console.log("up");
});
</script>
</body>
</html>
You click and hold on test button, you'll see in your console down. Now you release your mouse and you'll see both click and up.
If you click and hold, then you move your pointer away before releasing, you won't see neither click nor up.
Be aware that long time between touchstart and touchend dispatch a contextmenu (right click) instead of just click.
Related
I have JavaScript code where:
When the user presses the left mouse button, a mousedown event is fired, which triggers a call to function OnMouseDown.
When the user releases the left mouse button, a mouseup event is fired, which triggers a call to function OnMouseUp.
The two events are fired asynchronously.
For example, the mouseup event can be fired immediately after the mousedown event is fired (short mouse click), before the OnMouseDown ends. (Figure1)
I want to process the events sequentially, where the function OnMouseUp will only start after OnMouseDown ends.
I can achieve this by preventing the mouseup event from firing until after OnMouseDown ends (by calling removeEventListener('mouseup', OnMouseUp) when OnMouseDown begins) (Figure2)
But then I may lose a mouseup event altogether (Figure3)
Figure3 - mouseup event is lost
I am looking for a way to insure that
a mouseup event after a mousedown event is not lost, and
the OnMouseUp function begins after OnMouseDown ends.
How can I achieve this?
The following code example demonstrates the problem:
function sleep1 () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("Finished sleeping");
}, 2000);
});
}
// The mousedown event is fired when a pointing device button (usually a mouse button) is pressed on an element.
document.addEventListener('mousedown', async function(e) {
console.log('BEG OnMouseDown');
let retval = await sleep1();
console.log('retval: ', retval);
console.log('END OnMouseDown');
});
// The mouseup event is fired when a pointing device button (usually a mouse button) is released over an element.
document.addEventListener('mouseup', function(e) {
console.log('BEG OnMouseUp');
console.log('END OnMouseUp');
});
Clicking on the left mouse button and releasing results in the following printout, which shows that the function OnMouseUp ends before the function OnMouseDown ends, which fits figure1.
BEG OnMouseDown
BEG OnMouseUp
END OnMouseUp
Inside OnMouseDown: Finished sleeping
END OnMouseDown
You can try async await,
Define an async function then use await keyword on the mouswdown event, it will not fire the next event untill the the async function is done
What i'm understanding is that you want to record events in the sequence they have fired.
Please check this solution:
// The mousedown event is fired when a pointing device button (usually a mouse button) is pressed on an element.
var ismousedown = false;
document.addEventListener('mousedown', function(e) {
e.preventDefault();
ismousedown = true;
console.log('BEG OnMouseDown');
});
// The mouseup event is fired when a pointing device button (usually a mouse button) is released over an element.
document.addEventListener('mouseup', function(e) {
e.preventDefault();
if(ismousedown){
ismousedown = false;
console.log('BEG OnMouseUp');
}
});
Is this what you're looking for? There is something else i have missed?
I solved the problem by:
implementing a sleep based on here
introducing a flag onMouseDownStillProcessing that is set to false/true at the beginning/end of OnMouseDown, respectively.
waiting in the beginnning of OnMouseUp for onMouseDownStillProcessing to become true.
I have a button when pressed or on mouse-down event on it sends a command. It should also send a command when the button is released(as we don't have any release event, to my knowledge), I am using mouse-up event on the button. When i use the long press on the button from computer browser the mouse-up event works, But when i use mobile browser, if i do a long press on it the mouse up event is not fired, as the mobile browser will have text selection feature on long press. Could some one help me with this.
When the user interacts with your application using a mouse, it will respond via 'click' event, but when the user uses touch enable devices and touches the screen both 'touch' and 'click' event will occur.
for the single touch following events will occur in order :
touchstart
touchmove
touchend
mouseover
mousemove
mousedown
mouseup
click
one other 'touchcancel' will occur if the touch is interrupted.
When the user touches the screen, mouse events also executes. To avoid this, stop the default actions of touch events using preventDefault() method of event handler object,(e.preventDefault(); where 'e' is the event handler object).
Example :
let timeIn, timeOut;
const touchStart=(e)=>{
e.preventDefault();
console.log('touch start');
timeIn = Date.now();
}
const touchMove=(e)=>{
e.preventDefault();
timeOut= Date.now();
console.log('touch move');
}
const touchEnd=(e)=>{
e.preventDefault();
timeOut=((Date.now()-timeIn)/1000).toFixed(2);
console.log('touch end' , timeOut);
}
const mouseOver=()=>{
console.log('mouse over');
}
const mouseMove=()=>{
console.log('mouse move');
}
const mouseUp=()=>{
console.log('mouse up');
}
const mouseDown=()=>{
console.log('mouse down');
}
const mouseClick=()=>{
console.log('mouse click');
}
const touchCancel=(e)=>{
console.log('touch interrupted')
}
<div
ontouchstart="touchStart(event)"
ontouchmove="touchMove(event)"
ontouchend="touchEnd(event)"
onmouseover="mouseOver(event)"
onmousemove="mouseMove(event)"
onmouseup="mouseUp(event)"
onmousedown="mouseDown(event)"
onclick="mouseClick(event)"
ontouchcancel="touchCancel(event)"
>
touch me
</div>
To test this code on codepane : https://codepen.io/omiGit/pen/MVapRO
There is a good article on touch and mouse, must read: https://www.html5rocks.com/en/mobile/touchandmouse
I would like to prevent touchStart events in order to prevent Safari from bouncing in iOS devices under certain conditions.
To do so I'm using the folowing:
$('.wrapper').on('touchstart', function(e) {
e.preventDefault();
});
But now none of the click events work on it:
$('.wrapper').on('click', function() {
$('.wrapper').text('Click fired');
});
Reproduction online
I can not replace the click event for any other one. As this might come from the end user.
Previously to iOS 10, the bouncing could be avoided by preventing only touchMove but since iOS 10 it will bounce unless touchStart is prevented too.
Is there any way to prevent only the touchStart event but allow the use of the click event?
I don't have iOS 10 available for a test-drive, and this is a wild guess, but check this snippet:
$('.wrapper').on('click touchstart', function(e) {
if (e.type != 'click') {
e.preventDefault();
} else {
$('.wrapper').text('Click fired');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">asd</div>
See this jsfiddle:
http://jsfiddle.net/CB87X/6/
Click and hold the button, drag off the button and release. As you can see, the mouseup event never fires if the mouse is not over the element when the mouse button is released. Thus, the styling in my example never changes back to its original. How do you fire the mouseup event if the mouse button is released when not over the clicked element?
Edit1: BTW I have looked at several solutions on this site, implemented them, and the mouseup event still did not fire.
The mouseup event is relative to where the pointer is and this is expected behaviour. If you want your button to style properly, bind the mouseleave event as well.
This should do the trick. If you left click on the button (.but) and drag off, you can mouseup anywhere on the page and still fire the click event. If you mouseleave the page 'body' and mouseup, the binded mouseleave event is unbinded.
$('.but').mousedown( function(e) {
if (e.which == 1) {
var $this = $(this);
$this.bind('mouseleave', function(){
$('body').one('mouseup', function() {
$this.click();
});
});
$this.mouseup(function() {
$(this).unbind('mouseleave');
});
}
});
Forked your exemple to provide a working example:
http://jsfiddle.net/67Rrs/2/
Once the button is mousedowned, an event is bound to the next mouseup, wherever it happens, that resets the style.
Just use $(document).on('mouseup dragend', somefunc);
I have the following code:
$('#button').on('click change', function() {
alert('Who fired me, click or change?');
});
How can I know if the event called was "click" or "change"?
event.type will get you what you want.
DEMO
See also:
List of event types
$('#button').on('click change', function(){
console.log(event.type + ' is fired');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="text" id="tipo-imovel" />
#Vega solution is correct for simple events. However, if you namespace your events, (i.e. player.play) then you must get the namespace as well. For example, lets say I trigger the event:
$('#myElement').trigger('player.play');
Then to get the full event name, you need to do the following:
$('#myElement').on('player.play', function(e) {
console.log('Full event name: ' + e.type + '.' + e.namespace);
});
For listening to events fired the below snippet can be used:
$(document).on("abort activate afterprint beforeactivate beforecopy beforecut beforedeactivate beforepaste beforeprint beforeunload blur bounce change CheckboxStateChange click contextmenu copy cut dblclick deactivate deactivate DOMAttrModified DOMCharacterDataModified DOMFocusIn DOMFocusOut DOMMouseScroll DOMNodeInserted DOMNodeInsertedIntoDocument DOMNodeRemoved DOMNodeRemovedFromDocument DOMSubtreeModified drag dragdrop dragend dragenter dragexit draggesture dragleave dragover dragstart drop error error (window) finish focus focusin focusout hashchange help input keydown keypress keyup load message mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup mousewheel offline online overflow overflowchanged paste RadioStateChange readystatechange readystatechange (XMLDocument) readystatechange (XMLHttpRequest) reset resize scroll search select selectionchange selectstart start stop submit textInput underflow unload ",function(e){
console.log(e.type);
});
It is a little bit lengthy but surely will be helpful.:)