Skip to content

Instantly share code, notes, and snippets.

@tusharf5
Last active August 14, 2022 11:59
Show Gist options
  • Save tusharf5/58fcbef88c46795f15bbcc6d00ad4df5 to your computer and use it in GitHub Desktop.
Save tusharf5/58fcbef88c46795f15bbcc6d00ad4df5 to your computer and use it in GitHub Desktop.
HTML Mouse Hold And Unhold Event
#listener {
width: 45px;
height: 45px;
border: 1px solid black;
}
<div>
<div id="listener">
</div>
</div>
function prepareElementForHoldEvent(el) {
const mousehold = new MouseEvent('mousehold', {
bubbles: false,
});
const mouseholdmove = new MouseEvent('mouseholdmove', {
bubbles: false,
});
const mouseunhold = new MouseEvent('mouseunhold', {
bubbles: false,
});
let interval = undefined;
let isHeld = false;
function mousedown(ev) {
interval = setTimeout(() => {
el.dispatchEvent(mousehold);
isHeld = true;
interval = undefined;
}, 500);
}
function mousemove(ev) {
if (isHeld) {
el.dispatchEvent(mouseholdmove);
}
}
function mouseup(ev) {
if (interval) {
// if there is an interval clear it
clearInterval(interval);
}
if (isHeld) {
// dispatch this event only if it's held
el.dispatchEvent(mouseunhold);
isHeld = false;
}
}
el.addEventListener('mousedown', mousedown);
document.addEventListener('mousemove', mousemove);
document.addEventListener('touchmove', mousemove);
el.addEventListener('touchstart', mousedown);
document.addEventListener('mouseup', mouseup);
document.addEventListener('touchend', mouseup);
document.addEventListener('mouseleave', mouseup);
return function unRegister() {
document.removeEventListener('mousemove', mousemove);
document.removeEventListener('touchmove', mousemove);
el.removeEventListener('mousedown', mousedown);
el.removeEventListener('touchstart', mousedown);
document.removeEventListener('mouseup', mouseup);
document.removeEventListener('touchend', mouseup);
document.removeEventListener('mouseleave', mouseup);
};
}
// Usage
const el = document.getElementById('listener');
prepareElementForHoldEvent(el);
el.addEventListener('mousehold', function (ev) {
console.log('mousehold');
});
el.addEventListener('mouseholdmove', function (ev) {
console.log('mousehold moveeee');
});
el.addEventListener('mouseunhold', function (ev) {
console.log('mouseunhold');
});
function prepareElementForHoldEvent(
el: HTMLElement,
options: { holdDelay: number } = { holdDelay: 150 }
): () => void {
let interval: undefined | NodeJS.Timeout = undefined;
let isHeld = false;
function mousedown(ev: MouseEvent | TouchEvent) {
interval = setTimeout(
() => {
interval = undefined;
const mousehold = new CustomEvent("mousehold", {
bubbles: false,
detail: ev,
});
el.dispatchEvent(mousehold);
isHeld = true;
},
typeof options.holdDelay === "number" ? options.holdDelay : 150
);
}
function mousemove(ev: MouseEvent | TouchEvent) {
if (isHeld) {
const mouseholdmove = new CustomEvent("mouseholdmove", {
bubbles: false,
detail: ev,
});
el.dispatchEvent(mouseholdmove);
}
}
function mouseup(ev: MouseEvent | TouchEvent) {
if (interval) {
// if there is an interval clear it
clearInterval(interval);
}
if (isHeld) {
const mouseunhold = new CustomEvent("mouseunhold", {
bubbles: false,
detail: ev,
});
// dispatch this event only if it's held
el.dispatchEvent(mouseunhold);
isHeld = false;
}
}
el.addEventListener("mousedown", mousedown);
document.addEventListener("mousemove", mousemove);
document.addEventListener("touchmove", mousemove);
el.addEventListener("touchstart", mousedown);
document.addEventListener("mouseup", mouseup);
document.addEventListener("touchend", mouseup);
document.addEventListener("mouseleave", mouseup);
return function unRegister(): void {
document.removeEventListener("mousemove", mousemove);
document.removeEventListener("touchmove", mousemove);
el.removeEventListener("mousedown", mousedown);
el.removeEventListener("touchstart", mousedown);
document.removeEventListener("mouseup", mouseup);
document.removeEventListener("touchend", mouseup);
document.removeEventListener("mouseleave", mouseup);
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment