I want to know if a user stops pressing a button. So I capture the $button.mouseup(...) and $button.mouseout(...) events. However, I want the mouseout event to only matter when the user is still pressing the mouse- Otherwise, it will fire whenever the user passes over the button.
Any ideas?
Check e.which, which indicates the pressed button.
A quick and dirty method would be to use globals (or closures; some way of giving both the mouseup and the mouseout functions access to the same variable):
var mouseIsUp = true,
onMouseUp = function () {
mouseIsUp = true;
// ...
},
onMouseDown = function () {
mouseIsUp = false;
},
onMouseOut = function () {
if (!mouseIsUp) {
// ...
}
};
Related
I want avoid that double click also fire a single click event.
A simple solution i found is to delay the click with a timer and destroy the timer if a double click is fired.
var pendingClick;
function myclick(){
clearTimeout(pendingClick);
pendingClick = setTimeout(function(){
console.log('click');
}, 500);
}
function mydblclick(){
clearTimeout(pendingClick);
console.log('double click');
}
<div onclick="myclick()" ondblclick="mydblclick()">Double Click Me!</div>
But this solution is based on timing, if the double click is too slow (>500ms) it also fire a single click.
There is a stable solution for handle both click and double click?
Double-clicking in itself is "based on timing", even in the standard implementation of dblclick / ondblclick. There will always be the issue of a single-click being fired if the double-click is "too slow". What is "too slow"? 300ms? 500ms? 1000ms? Your double-clicks may be only 50ms apart, while my mom's double-clicks are 1-2 seconds apart...
You can get the event and cancel it with the addEventListener like this:
document.addEventListener('dblclick', (event) => {
event.preventDefault();
event.stopPropagation();
}, true); // With this true, you are cancelling the dblclick event
let pendingClick;
function myclick(){
clearTimeout(pendingClick);
pendingClick = setTimeout(function (){
console.log('click');
}, 500);
}
function mydblclick(){
clearTimeout(pendingClick);
console.log('double click');
}
<div onclick="myclick()" ondblclick="mydblclick()">Double Click Me!</div>
Only work with the 'onclick' function to check if it was one or two clicks and use a variable to count the number of clicks in a given time interval.
Example:
var pendingClick;
var clicked = 0;
var time_dbclick = 500 // 500ms
function myclick(){
clicked++;
if(clicked >= 2){
mydblclick()
clearTimeout(pendingClick)
clicked = 0;
return;
}
clearTimeout(pendingClick)
pendingClick = setTimeout(() => {
console.log('One click!')
clicked = 0;
}, time_dbclick);
}
function mydblclick(){
console.log('double click');
}
<div onclick="myclick()">Double Click Me!</div>
Custom Events instead of inline event handlers
If one prefers to use .addEventListener and .removeEventListener instead of HTML inline-eventhandlers, I would suggest another approach based on Custom Events. That means one would not make use of the standard implementation of "click" and "dblclick", but create own event handling for both:
let lastLeftClick = document.dispatchEvent(new Event("click"));
let doubleclickLength = 300;
function leftClickHandler (e) {
if (e.button != 0) return; // only left clicks shall be handled;
let delaySinceLastClick = e.timeStamp - lastLeftClick.timeStamp;
let eIsDoubleClick = delaySinceLastClick < doubleclickLength;
if (eIsDoubleClick) {
let doubleclickEvt = new CustomEvent("doubleclick", e);
lastLeftClick = lastLeftClick = doubleclickEvt;
document.dispatchEvent(doubleclickEvt);
} else {
let singleClickEvt = new CustomEvent("singleclick", e);
lastLeftClick = singleClickEvt;
document.dispatchEvent(lastLeftClick);
}
}
// adding above click event implementation:
document.addEventListener("click", leftClickHandler);
using the new custom events:
document.addEventListener("singleclick", e=>console.log("single click"));
document.addEventListener("doubleclick", e=>console.log("double click"));
Adding Event Listener
function Solitaire() {
this.table.addEventListener("click", this.handleClick.bind(this));
this.table.addEventListener("dblclick", this.handleDoubleClick.bind(this));
}
Handling Event
Solitaire.prototype.handleDoubleClick = function(event) {
console.log("DoubleClick");
};
Solitaire.prototype.handleClick = function(event) {
console.log("Click");
};
Expected output (in console) on a double click event
DoubleClick
But the output I get in console:
Click
Click
DoubleClick
I don't know about easeljs, but I can tell you about how it is done in jQuery, where you need to "hack" it to make it actually work.
var DELAY = 500;
$('#my_element').on('click', function(e){
++clicks; // Count the clicks
if(clicks === 1){
// One click has been made
var myTimerToDetectDoubleClick = setTimeout(function(){
console.log('This was a single click');
doStuffForSingleClick();
clicks = 0;
}, DELAY);
} // End of if
else{
// Someone is clicking pretty damn fast, they probably mean double click :p
clearTimeout(myTimerToDetectDoubleClick);
doStuffForDoubleClick();
clicks = 0;
}
}).on('dblclick', function(evt){
evt.preventDefault(); // cancel system's default double click
});
The basic essence will remain the same for event handling for easeljs. You can imitate this behaviour accordingly there.
I'm having a problem with the button in my HTML5 application.
When I press the button a Video player runs and plays the video that is stored locally. My issue now is that when I hold the button and release it, it doesn't fire the video player. I'm using an onclick event on my button.
I want to achieve that if I press and hold the button and then release it, it fires the same event as the one I use with the onclick.
Use onmouseup event.
var button = //your button
button.onmouseup = function() {
//your logic
}
Actually onmousedown event instead of onClick will do the trick.
Again the same syntax:
Javascript
<button onmousedown ="clickFunction()">Click me!</button>
function clickFunction(){
//code goes here
}
jQuery
function clickFunction(){
$(button).onmousedown(function(){
//code goes here
});
};
you should use a boolean to save the current state.
var mouse_is_down = false;
var current_i = 0; // current_i is used to handle double click (to not act like a hold)
var button = document.querySelector("#myButton");
button.onmousedown = function(){
mouse_is_down = true;
// Do thing here for a mousedown event
setTimeout(
(function(index){
return function(){
if(mouse_is_down && current_i === index){
//do thing when hold
}
};
})(++current_i), 500); // time you want to hold before fire action in milliseconds
};
button.onmouseup = function(){
mouse_is_down = false;
current_i++;
// Do thing here for a mouseup event
};
Fiddle : link
I have an element(textArea). Now I would like a long press event and a double click event on the element. I am able to do this but I would also like to use event.preventDefault() in the mousedown event of long press event. This in turn prevents the dblClick event also.
The reason why I want to preventDefault is I am rendering an element on longPress and wanted to prevent the initial mouseDown as I am firing mousemove after longpress. I have searched and re-searched the net but am unable to find a good answer which solves the problem of long press and dblclick on the same element.
thanks!!
try this Demo
HTML
<input type="button" ondblclick="whateverFunc()" onmousedown="func(event)" onmouseup="revert()" value="hold for long"/>
JavaScript
var timer;
var istrue = false;
var delay = 3000; // how much long u have to hold click in MS
function func(e)
{
istrue = true;
timer = setTimeout(function(){ makeChange();},delay);
// Incase if you want to prevent Default functionality on mouse down
if (e.preventDefault)
{
e.preventDefault();
} else {
e.returnValue = false;
}
}
function makeChange()
{
if(timer)
clearTimeout(timer);
if(istrue)
{
/// rest of your code
alert('holding');
}
}
function revert()
{
istrue =false;
}
function whateverFunc()
{
alert('dblclick');
}
is it possible to check the state of the mousebutton (pressed or released). I know that this is the purpose of the eventhandling in jquery, but I wonder if it would be possible to do a function if the button of the mouse isn't pressed without the need of a change in position of the button (pressed to released or vice versa)?
Try below code, DEMO here
$(document).mousedown (function () {
$('#result').text('Pressed');
}).mouseup (function () {
$('#result').text('Released');
});
$(function () {
//setup flag for the state of the mouse button and create an object that converts an event type into a boolean for the flag
var mousePressed = false,
mouseConvert = {
mousedown : true,
mouseup : false
};
//bind to the document's mousedown and mouseup events to change the flag when necessary
$(document).on('mousedown mouseup', function (event) {
//set the flag to the new state of the mouse button
mousePressed = mouseConvert[event.type];
//if you only want to watch one mouse button and not all of them then
//you can create an if/then statement here that checks event.which
//and only updates the flag if it is the button you want, check-out Rob W.'s
//answer to see the different values for event.which with respect to the mouse
});
//now you can check the value of the `mousePressed` variable, if it is equal to `true` then the mouse is currently pressed
});
You can use the mousedown and mouseup event to detect changed mouse events. This event should be bound to window. Demo: http://jsfiddle.net/uwzbn/
var mouseState = (function(){
var mousestatus = 0;
$(window).mousedown(function(e) {
mousestatus = e.which;
}).mouseup(function(e){
mousestatus = 0;
});
return function() {
return mousestatus;
}
})();
This function returns four possible values:
0 Mouse released false
1 Left click true
2 Middle click true
3 Right click true
In a boolean context, the function return's value evaluates to false when the mouse is not down. When the mouse is pressed, you can read which mouse key is pressed (as a bonus).