PointerEvents: Detect touching “through” an element
2
Using pointer events, I can't find the right event to trigger for finger-based touches on smartphones (tested with Chrome Android and Chrome Devtools with mobile emulation).
What I need: A "hover" event if you touch action passes through an element while holding the finger down moving over the screen.
That is, put your finger down outside the element, move through it, and move finger up only after completely passing through the element.
I attached a code snipped to clearify: I don't need events for the blue elements, I would only need respective "in/out" events for the red element in the snippet. The sample JS code will fire for the mouse, but on mobile it does not trigger any console.infos.
var elem = document.querySelector(".element");
elem.addEventListener("pointerover", function() {
console.clear();
console.info("pointerover triggered");
});
elem.addEventListener("pointerenter", function() {
console.clear();
console.info("pointerenter triggered");
});
elem.addEventListener("pointerleave", function() {
console.clear();
console.info("pointerleave triggered");
});.outer {
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align:center;
touch-action: none;
}
.start {
position: relative;
top:0px;
left:0px;
width: 100px;
height: 20px;
background-color: blue;
}
.element {
position: relative;
top: 20px;
left: 0px;
width: 100px;
height: 20px;
background-color: red;
}
.end {
position: relative;
top: 40px;
right: 0;
width: 100px;
height: 20px;
background-color: blue;
}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>javascript
android dom smartphone pointer-events edited Nov 23 '18 at 14:25
Bharata
8,28261131
asked Nov 19 '18 at 14:37
DynalonDynalon
2,80863861
add a comment |
2
Using pointer events, I can't find the right event to trigger for finger-based touches on smartphones (tested with Chrome Android and Chrome Devtools with mobile emulation).
What I need: A "hover" event if you touch action passes through an element while holding the finger down moving over the screen.
That is, put your finger down outside the element, move through it, and move finger up only after completely passing through the element.
I attached a code snipped to clearify: I don't need events for the blue elements, I would only need respective "in/out" events for the red element in the snippet. The sample JS code will fire for the mouse, but on mobile it does not trigger any console.infos.
var elem = document.querySelector(".element");
elem.addEventListener("pointerover", function() {
console.clear();
console.info("pointerover triggered");
});
elem.addEventListener("pointerenter", function() {
console.clear();
console.info("pointerenter triggered");
});
elem.addEventListener("pointerleave", function() {
console.clear();
console.info("pointerleave triggered");
});.outer {
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align:center;
touch-action: none;
}
.start {
position: relative;
top:0px;
left:0px;
width: 100px;
height: 20px;
background-color: blue;
}
.element {
position: relative;
top: 20px;
left: 0px;
width: 100px;
height: 20px;
background-color: red;
}
.end {
position: relative;
top: 40px;
right: 0;
width: 100px;
height: 20px;
background-color: blue;
}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>javascript
android dom smartphone pointer-events edited Nov 23 '18 at 14:25
Bharata
8,28261131
asked Nov 19 '18 at 14:37
DynalonDynalon
2,80863861
I don't think those events work on mobile at all. Try withpointermove
– ritaj
Nov 19 '18 at 14:40
Neitherpointermovenorpointeroverwill be fired when start AND end of the touch is outside the red element.
– Dynalon
Nov 19 '18 at 14:41
pointeroverdoesn't work on mobile either. You will have to manually implement such logic, I'm afraid.
– ritaj
Nov 19 '18 at 14:51
I hope that I understand you correctly because in your question we could misinterpret the task – it is relatively difficalt to understand the task without images. After a lot of shaman dances with a tambourine (a lot of time) I found two solutions for you.
– Bharata
Nov 22 '18 at 17:17
@Bharata I think thats unfair to claim, I provided a running snippet that works on dekstop with the mouse but not on a smartphone. What I asked for is how to get that working on a smartphone, so I think its pretty clear what my question is.
– Dynalon
Nov 23 '18 at 7:56
add a comment |
2
2
2
Using pointer events, I can't find the right event to trigger for finger-based touches on smartphones (tested with Chrome Android and Chrome Devtools with mobile emulation).
What I need: A "hover" event if you touch action passes through an element while holding the finger down moving over the screen.
That is, put your finger down outside the element, move through it, and move finger up only after completely passing through the element.
I attached a code snipped to clearify: I don't need events for the blue elements, I would only need respective "in/out" events for the red element in the snippet. The sample JS code will fire for the mouse, but on mobile it does not trigger any console.infos.
var elem = document.querySelector(".element");
elem.addEventListener("pointerover", function() {
console.clear();
console.info("pointerover triggered");
});
elem.addEventListener("pointerenter", function() {
console.clear();
console.info("pointerenter triggered");
});
elem.addEventListener("pointerleave", function() {
console.clear();
console.info("pointerleave triggered");
});.outer {
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align:center;
touch-action: none;
}
.start {
position: relative;
top:0px;
left:0px;
width: 100px;
height: 20px;
background-color: blue;
}
.element {
position: relative;
top: 20px;
left: 0px;
width: 100px;
height: 20px;
background-color: red;
}
.end {
position: relative;
top: 40px;
right: 0;
width: 100px;
height: 20px;
background-color: blue;
}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>javascript
android dom smartphone pointer-events edited Nov 23 '18 at 14:25
Bharata
8,28261131
asked Nov 19 '18 at 14:37
DynalonDynalon
2,80863861
Using pointer events, I can't find the right event to trigger for finger-based touches on smartphones (tested with Chrome Android and Chrome Devtools with mobile emulation).
What I need: A "hover" event if you touch action passes through an element while holding the finger down moving over the screen.
That is, put your finger down outside the element, move through it, and move finger up only after completely passing through the element.
I attached a code snipped to clearify: I don't need events for the blue elements, I would only need respective "in/out" events for the red element in the snippet. The sample JS code will fire for the mouse, but on mobile it does not trigger any console.infos.
var elem = document.querySelector(".element");
elem.addEventListener("pointerover", function() {
console.clear();
console.info("pointerover triggered");
});
elem.addEventListener("pointerenter", function() {
console.clear();
console.info("pointerenter triggered");
});
elem.addEventListener("pointerleave", function() {
console.clear();
console.info("pointerleave triggered");
});.outer {
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align:center;
touch-action: none;
}
.start {
position: relative;
top:0px;
left:0px;
width: 100px;
height: 20px;
background-color: blue;
}
.element {
position: relative;
top: 20px;
left: 0px;
width: 100px;
height: 20px;
background-color: red;
}
.end {
position: relative;
top: 40px;
right: 0;
width: 100px;
height: 20px;
background-color: blue;
}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>var elem = document.querySelector(".element");
elem.addEventListener("pointerover", function() {
console.clear();
console.info("pointerover triggered");
});
elem.addEventListener("pointerenter", function() {
console.clear();
console.info("pointerenter triggered");
});
elem.addEventListener("pointerleave", function() {
console.clear();
console.info("pointerleave triggered");
});.outer {
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align:center;
touch-action: none;
}
.start {
position: relative;
top:0px;
left:0px;
width: 100px;
height: 20px;
background-color: blue;
}
.element {
position: relative;
top: 20px;
left: 0px;
width: 100px;
height: 20px;
background-color: red;
}
.end {
position: relative;
top: 40px;
right: 0;
width: 100px;
height: 20px;
background-color: blue;
}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>var elem = document.querySelector(".element");
elem.addEventListener("pointerover", function() {
console.clear();
console.info("pointerover triggered");
});
elem.addEventListener("pointerenter", function() {
console.clear();
console.info("pointerenter triggered");
});
elem.addEventListener("pointerleave", function() {
console.clear();
console.info("pointerleave triggered");
});.outer {
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align:center;
touch-action: none;
}
.start {
position: relative;
top:0px;
left:0px;
width: 100px;
height: 20px;
background-color: blue;
}
.element {
position: relative;
top: 20px;
left: 0px;
width: 100px;
height: 20px;
background-color: red;
}
.end {
position: relative;
top: 40px;
right: 0;
width: 100px;
height: 20px;
background-color: blue;
}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>javascript
android dom smartphone pointer-events javascript
android dom smartphone pointer-events edited Nov 23 '18 at 14:25
Bharata
8,28261131
asked Nov 19 '18 at 14:37
DynalonDynalon
2,80863861
edited Nov 23 '18 at 14:25
Bharata
8,28261131
asked Nov 19 '18 at 14:37
DynalonDynalon
2,80863861
edited Nov 23 '18 at 14:25
Bharata
8,28261131
edited Nov 23 '18 at 14:25
Bharata
8,28261131
edited Nov 23 '18 at 14:25
Bharata
8,28261131
8,28261131
asked Nov 19 '18 at 14:37
DynalonDynalon
2,80863861
asked Nov 19 '18 at 14:37
DynalonDynalon
2,80863861
asked Nov 19 '18 at 14:37
DynalonDynalon
2,80863861
2,80863861
I don't think those events work on mobile at all. Try withpointermove
– ritaj
Nov 19 '18 at 14:40
Neitherpointermovenorpointeroverwill be fired when start AND end of the touch is outside the red element.
– Dynalon
Nov 19 '18 at 14:41
pointeroverdoesn't work on mobile either. You will have to manually implement such logic, I'm afraid.
– ritaj
Nov 19 '18 at 14:51
I hope that I understand you correctly because in your question we could misinterpret the task – it is relatively difficalt to understand the task without images. After a lot of shaman dances with a tambourine (a lot of time) I found two solutions for you.
– Bharata
Nov 22 '18 at 17:17
@Bharata I think thats unfair to claim, I provided a running snippet that works on dekstop with the mouse but not on a smartphone. What I asked for is how to get that working on a smartphone, so I think its pretty clear what my question is.
– Dynalon
Nov 23 '18 at 7:56
add a comment |
I don't think those events work on mobile at all. Try withpointermove
– ritaj
Nov 19 '18 at 14:40
Neitherpointermovenorpointeroverwill be fired when start AND end of the touch is outside the red element.
– Dynalon
Nov 19 '18 at 14:41
pointeroverdoesn't work on mobile either. You will have to manually implement such logic, I'm afraid.
– ritaj
Nov 19 '18 at 14:51
I hope that I understand you correctly because in your question we could misinterpret the task – it is relatively difficalt to understand the task without images. After a lot of shaman dances with a tambourine (a lot of time) I found two solutions for you.
– Bharata
Nov 22 '18 at 17:17
@Bharata I think thats unfair to claim, I provided a running snippet that works on dekstop with the mouse but not on a smartphone. What I asked for is how to get that working on a smartphone, so I think its pretty clear what my question is.
– Dynalon
Nov 23 '18 at 7:56
I don't think those events work on mobile at all. Try with
pointermove– ritaj
Nov 19 '18 at 14:40
I don't think those events work on mobile at all. Try with
pointermove– ritaj
Nov 19 '18 at 14:40
Neither
pointermove nor pointerover will be fired when start AND end of the touch is outside the red element.– Dynalon
Nov 19 '18 at 14:41
Neither
pointermove nor pointerover will be fired when start AND end of the touch is outside the red element.– Dynalon
Nov 19 '18 at 14:41
pointerover doesn't work on mobile either. You will have to manually implement such logic, I'm afraid.– ritaj
Nov 19 '18 at 14:51
pointerover doesn't work on mobile either. You will have to manually implement such logic, I'm afraid.– ritaj
Nov 19 '18 at 14:51
I hope that I understand you correctly because in your question we could misinterpret the task – it is relatively difficalt to understand the task without images. After a lot of shaman dances with a tambourine (a lot of time) I found two solutions for you.
– Bharata
Nov 22 '18 at 17:17
I hope that I understand you correctly because in your question we could misinterpret the task – it is relatively difficalt to understand the task without images. After a lot of shaman dances with a tambourine (a lot of time) I found two solutions for you.
– Bharata
Nov 22 '18 at 17:17
@Bharata I think thats unfair to claim, I provided a running snippet that works on dekstop with the mouse but not on a smartphone. What I asked for is how to get that working on a smartphone, so I think its pretty clear what my question is.
– Dynalon
Nov 23 '18 at 7:56
@Bharata I think thats unfair to claim, I provided a running snippet that works on dekstop with the mouse but not on a smartphone. What I asked for is how to get that working on a smartphone, so I think its pretty clear what my question is.
– Dynalon
Nov 23 '18 at 7:56
add a comment |
2 Answers
2
active
oldest
votes
1
+200
I hope that I understand you correctly. I wrote and tested for you two different solutions: pointerevents and touch events. In each move event from this events you can detect the current element with the function document.elementFromPoint().
Solution with pointerevents
Maybe you can use pointerevents – they work in Chrome Devtools with mobile emulation, but not work on my Android device (I think my device is too old). Or maybe you can use it with Pointer Events Polyfill. The Browser compatibility for pointerevents you can see here.
var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('pointerdown', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'pointer-START';
}
});
document.addEventListener('pointermove', function(e)
{
elementFromPoint = document.elementFromPoint(e.pageX - window.pageXOffset, e.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'pointer-MOVE';
}
});
document.addEventListener('pointerup', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>Solution with touch events
But you can use touch events too. Unfortunatelly, the events touchenter and touchleave were deleted from the specification and because of them we have to write a workaround using document.elementFromPoint() too.
The following snippet works only in the mobile emulation (tested with Chrome Devtools) or on devices which support touch events (tested with Android).
var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('touchstart', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'touch-START';
}
});
document.addEventListener('touchmove', function(e)
{
var touch = e.touches[0];
elementFromPoint = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'touch-MOVE';
}
});
document.addEventListener('touchend', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>Maybe the following links can help you:
- Get element from point when you have overlapping elements?
- How to find out the actual event.target of touchmove javascript
event?
answered Nov 22 '18 at 17:03
BharataBharata
8,28261131
1
Accept your solution forelementFromPoint(). This is vastly superior to bounding box hit tests, as it works for any SVG shape/path elements, and also for SVG lines which do not have a fill but only a stroke property.
– Dynalon
Nov 23 '18 at 8:16
add a comment |
1
Try this
<script>
var startElem = document.querySelector(".start");
var endElem = document.querySelector(".end");
var elem = document.querySelector(".element");
var started = false;
var passedThroughStart = false;
var passedThroughEnd = false;
var ended = false;
startElem.addEventListener("pointerdown", function(e){
started = true;
});
window.addEventListener("pointermove", function(e) {
var x = e.clientX;
var y = e.clientY;
var bounds = elem.getBoundingClientRect();
if( !passedThroughStart &&
x > bounds.left && x < bounds.left + bounds.width &&
y > bounds.top && y < bounds.top + bounds.height
){
passedThroughStart = true;
}
if( passedThroughStart && !passedThroughEnd &&
x > bounds.left && x < bounds.left + bounds.width &&
y > bounds.top + bounds.height
){
passedThroughEnd = true;
}
})
window.addEventListener("pointerup", function(e) {
var x = e.clientX;
var y = e.clientY;
var bounds = endElem.getBoundingClientRect();
ended = ( x > bounds.left && x < bounds.left + bounds.width && y > bounds.top && y < bounds.top + bounds.height)
if( started && passedThroughStart && passedThroughEnd && ended ){
console.log("Hooray!");
}
started = false;
passedThroughStart = false;
passedThroughEnd = false;
ended = false;
});
</script>
Alternatively use pointerenter and pointerleave rather than pointermove
elem.addEventListener('pointenter', function(e) {
passedThroughStart = true;
}
elem.addEventListener('pointleave', function(e) {
passedThroughEnd = true;
}
answered Nov 21 '18 at 17:28
Shawn NorthropShawn Northrop
2,92643157
I don't thinktouchenter / touchleaveexist. Also, for what its worth, this guy recommends trying to limit scope of touch handler so it doesn't wreck havoc with scrolling: html5rocks.com/en/mobile/touchandmouse -- but good call on trying out touch events!
– jacob.mccrumb
Nov 21 '18 at 17:36
I specifically want pointerevents, but I also think my specific code example does not work with touch events. Feel free to provider a working example
– Dynalon
Nov 21 '18 at 17:37
I've updated but I am working on a more concise answer
– Shawn Northrop
Nov 21 '18 at 18:34
Ok... I think I have it working now ;) just updated the answer again. I have only tested this on chrome using the device mode
– Shawn Northrop
Nov 21 '18 at 19:01
I had hoped to avoid manual bounding box hit tests, but I seems there is no way around it. Works for rectangular shapes and circles, but gets awfully complex for non regular elements (i use SVGs...)
– Dynalon
Nov 21 '18 at 19:48
|
show 3 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53376909%2fpointerevents-detect-touching-through-an-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
+200
I hope that I understand you correctly. I wrote and tested for you two different solutions: pointerevents and touch events. In each move event from this events you can detect the current element with the function document.elementFromPoint().
Solution with pointerevents
Maybe you can use pointerevents – they work in Chrome Devtools with mobile emulation, but not work on my Android device (I think my device is too old). Or maybe you can use it with Pointer Events Polyfill. The Browser compatibility for pointerevents you can see here.
var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('pointerdown', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'pointer-START';
}
});
document.addEventListener('pointermove', function(e)
{
elementFromPoint = document.elementFromPoint(e.pageX - window.pageXOffset, e.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'pointer-MOVE';
}
});
document.addEventListener('pointerup', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>Solution with touch events
But you can use touch events too. Unfortunatelly, the events touchenter and touchleave were deleted from the specification and because of them we have to write a workaround using document.elementFromPoint() too.
The following snippet works only in the mobile emulation (tested with Chrome Devtools) or on devices which support touch events (tested with Android).
var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('touchstart', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'touch-START';
}
});
document.addEventListener('touchmove', function(e)
{
var touch = e.touches[0];
elementFromPoint = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'touch-MOVE';
}
});
document.addEventListener('touchend', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>Maybe the following links can help you:
- Get element from point when you have overlapping elements?
- How to find out the actual event.target of touchmove javascript
event?
answered Nov 22 '18 at 17:03
BharataBharata
8,28261131
1
Accept your solution forelementFromPoint(). This is vastly superior to bounding box hit tests, as it works for any SVG shape/path elements, and also for SVG lines which do not have a fill but only a stroke property.
– Dynalon
Nov 23 '18 at 8:16
add a comment |
1
+200
I hope that I understand you correctly. I wrote and tested for you two different solutions: pointerevents and touch events. In each move event from this events you can detect the current element with the function document.elementFromPoint().
Solution with pointerevents
Maybe you can use pointerevents – they work in Chrome Devtools with mobile emulation, but not work on my Android device (I think my device is too old). Or maybe you can use it with Pointer Events Polyfill. The Browser compatibility for pointerevents you can see here.
var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('pointerdown', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'pointer-START';
}
});
document.addEventListener('pointermove', function(e)
{
elementFromPoint = document.elementFromPoint(e.pageX - window.pageXOffset, e.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'pointer-MOVE';
}
});
document.addEventListener('pointerup', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>Solution with touch events
But you can use touch events too. Unfortunatelly, the events touchenter and touchleave were deleted from the specification and because of them we have to write a workaround using document.elementFromPoint() too.
The following snippet works only in the mobile emulation (tested with Chrome Devtools) or on devices which support touch events (tested with Android).
var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('touchstart', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'touch-START';
}
});
document.addEventListener('touchmove', function(e)
{
var touch = e.touches[0];
elementFromPoint = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'touch-MOVE';
}
});
document.addEventListener('touchend', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>Maybe the following links can help you:
- Get element from point when you have overlapping elements?
- How to find out the actual event.target of touchmove javascript
event?
answered Nov 22 '18 at 17:03
BharataBharata
8,28261131
1
Accept your solution forelementFromPoint(). This is vastly superior to bounding box hit tests, as it works for any SVG shape/path elements, and also for SVG lines which do not have a fill but only a stroke property.
– Dynalon
Nov 23 '18 at 8:16
add a comment |
1
+200
1
+200
1
+200
I hope that I understand you correctly. I wrote and tested for you two different solutions: pointerevents and touch events. In each move event from this events you can detect the current element with the function document.elementFromPoint().
Solution with pointerevents
Maybe you can use pointerevents – they work in Chrome Devtools with mobile emulation, but not work on my Android device (I think my device is too old). Or maybe you can use it with Pointer Events Polyfill. The Browser compatibility for pointerevents you can see here.
var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('pointerdown', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'pointer-START';
}
});
document.addEventListener('pointermove', function(e)
{
elementFromPoint = document.elementFromPoint(e.pageX - window.pageXOffset, e.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'pointer-MOVE';
}
});
document.addEventListener('pointerup', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>Solution with touch events
But you can use touch events too. Unfortunatelly, the events touchenter and touchleave were deleted from the specification and because of them we have to write a workaround using document.elementFromPoint() too.
The following snippet works only in the mobile emulation (tested with Chrome Devtools) or on devices which support touch events (tested with Android).
var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('touchstart', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'touch-START';
}
});
document.addEventListener('touchmove', function(e)
{
var touch = e.touches[0];
elementFromPoint = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'touch-MOVE';
}
});
document.addEventListener('touchend', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>Maybe the following links can help you:
- Get element from point when you have overlapping elements?
- How to find out the actual event.target of touchmove javascript
event?
answered Nov 22 '18 at 17:03
BharataBharata
8,28261131
I hope that I understand you correctly. I wrote and tested for you two different solutions: pointerevents and touch events. In each move event from this events you can detect the current element with the function document.elementFromPoint().
Solution with pointerevents
Maybe you can use pointerevents – they work in Chrome Devtools with mobile emulation, but not work on my Android device (I think my device is too old). Or maybe you can use it with Pointer Events Polyfill. The Browser compatibility for pointerevents you can see here.
var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('pointerdown', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'pointer-START';
}
});
document.addEventListener('pointermove', function(e)
{
elementFromPoint = document.elementFromPoint(e.pageX - window.pageXOffset, e.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'pointer-MOVE';
}
});
document.addEventListener('pointerup', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>Solution with touch events
But you can use touch events too. Unfortunatelly, the events touchenter and touchleave were deleted from the specification and because of them we have to write a workaround using document.elementFromPoint() too.
The following snippet works only in the mobile emulation (tested with Chrome Devtools) or on devices which support touch events (tested with Android).
var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('touchstart', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'touch-START';
}
});
document.addEventListener('touchmove', function(e)
{
var touch = e.touches[0];
elementFromPoint = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'touch-MOVE';
}
});
document.addEventListener('touchend', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>Maybe the following links can help you:
- Get element from point when you have overlapping elements?
- How to find out the actual event.target of touchmove javascript
event?
var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('pointerdown', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'pointer-START';
}
});
document.addEventListener('pointermove', function(e)
{
elementFromPoint = document.elementFromPoint(e.pageX - window.pageXOffset, e.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'pointer-MOVE';
}
});
document.addEventListener('pointerup', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('pointerdown', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'pointer-START';
}
});
document.addEventListener('pointermove', function(e)
{
elementFromPoint = document.elementFromPoint(e.pageX - window.pageXOffset, e.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'pointer-MOVE';
}
});
document.addEventListener('pointerup', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('touchstart', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'touch-START';
}
});
document.addEventListener('touchmove', function(e)
{
var touch = e.touches[0];
elementFromPoint = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'touch-MOVE';
}
});
document.addEventListener('touchend', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('touchstart', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'touch-START';
}
});
document.addEventListener('touchmove', function(e)
{
var touch = e.touches[0];
elementFromPoint = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'touch-MOVE';
}
});
document.addEventListener('touchend', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>answered Nov 22 '18 at 17:03
BharataBharata
8,28261131
answered Nov 22 '18 at 17:03
BharataBharata
8,28261131
answered Nov 22 '18 at 17:03
BharataBharata
8,28261131
answered Nov 22 '18 at 17:03
BharataBharata
8,28261131
8,28261131
1
Accept your solution forelementFromPoint(). This is vastly superior to bounding box hit tests, as it works for any SVG shape/path elements, and also for SVG lines which do not have a fill but only a stroke property.
– Dynalon
Nov 23 '18 at 8:16
add a comment |
1
Accept your solution forelementFromPoint(). This is vastly superior to bounding box hit tests, as it works for any SVG shape/path elements, and also for SVG lines which do not have a fill but only a stroke property.
– Dynalon
Nov 23 '18 at 8:16
1
1
Accept your solution for
elementFromPoint(). This is vastly superior to bounding box hit tests, as it works for any SVG shape/path elements, and also for SVG lines which do not have a fill but only a stroke property.– Dynalon
Nov 23 '18 at 8:16
Accept your solution for
elementFromPoint(). This is vastly superior to bounding box hit tests, as it works for any SVG shape/path elements, and also for SVG lines which do not have a fill but only a stroke property.– Dynalon
Nov 23 '18 at 8:16
add a comment |
1
Try this
<script>
var startElem = document.querySelector(".start");
var endElem = document.querySelector(".end");
var elem = document.querySelector(".element");
var started = false;
var passedThroughStart = false;
var passedThroughEnd = false;
var ended = false;
startElem.addEventListener("pointerdown", function(e){
started = true;
});
window.addEventListener("pointermove", function(e) {
var x = e.clientX;
var y = e.clientY;
var bounds = elem.getBoundingClientRect();
if( !passedThroughStart &&
x > bounds.left && x < bounds.left + bounds.width &&
y > bounds.top && y < bounds.top + bounds.height
){
passedThroughStart = true;
}
if( passedThroughStart && !passedThroughEnd &&
x > bounds.left && x < bounds.left + bounds.width &&
y > bounds.top + bounds.height
){
passedThroughEnd = true;
}
})
window.addEventListener("pointerup", function(e) {
var x = e.clientX;
var y = e.clientY;
var bounds = endElem.getBoundingClientRect();
ended = ( x > bounds.left && x < bounds.left + bounds.width && y > bounds.top && y < bounds.top + bounds.height)
if( started && passedThroughStart && passedThroughEnd && ended ){
console.log("Hooray!");
}
started = false;
passedThroughStart = false;
passedThroughEnd = false;
ended = false;
});
</script>
Alternatively use pointerenter and pointerleave rather than pointermove
elem.addEventListener('pointenter', function(e) {
passedThroughStart = true;
}
elem.addEventListener('pointleave', function(e) {
passedThroughEnd = true;
}
answered Nov 21 '18 at 17:28
Shawn NorthropShawn Northrop
2,92643157
I don't thinktouchenter / touchleaveexist. Also, for what its worth, this guy recommends trying to limit scope of touch handler so it doesn't wreck havoc with scrolling: html5rocks.com/en/mobile/touchandmouse -- but good call on trying out touch events!
– jacob.mccrumb
Nov 21 '18 at 17:36
I specifically want pointerevents, but I also think my specific code example does not work with touch events. Feel free to provider a working example
– Dynalon
Nov 21 '18 at 17:37
I've updated but I am working on a more concise answer
– Shawn Northrop
Nov 21 '18 at 18:34
Ok... I think I have it working now ;) just updated the answer again. I have only tested this on chrome using the device mode
– Shawn Northrop
Nov 21 '18 at 19:01
I had hoped to avoid manual bounding box hit tests, but I seems there is no way around it. Works for rectangular shapes and circles, but gets awfully complex for non regular elements (i use SVGs...)
– Dynalon
Nov 21 '18 at 19:48
|
show 3 more comments
1
Try this
<script>
var startElem = document.querySelector(".start");
var endElem = document.querySelector(".end");
var elem = document.querySelector(".element");
var started = false;
var passedThroughStart = false;
var passedThroughEnd = false;
var ended = false;
startElem.addEventListener("pointerdown", function(e){
started = true;
});
window.addEventListener("pointermove", function(e) {
var x = e.clientX;
var y = e.clientY;
var bounds = elem.getBoundingClientRect();
if( !passedThroughStart &&
x > bounds.left && x < bounds.left + bounds.width &&
y > bounds.top && y < bounds.top + bounds.height
){
passedThroughStart = true;
}
if( passedThroughStart && !passedThroughEnd &&
x > bounds.left && x < bounds.left + bounds.width &&
y > bounds.top + bounds.height
){
passedThroughEnd = true;
}
})
window.addEventListener("pointerup", function(e) {
var x = e.clientX;
var y = e.clientY;
var bounds = endElem.getBoundingClientRect();
ended = ( x > bounds.left && x < bounds.left + bounds.width && y > bounds.top && y < bounds.top + bounds.height)
if( started && passedThroughStart && passedThroughEnd && ended ){
console.log("Hooray!");
}
started = false;
passedThroughStart = false;
passedThroughEnd = false;
ended = false;
});
</script>
Alternatively use pointerenter and pointerleave rather than pointermove
elem.addEventListener('pointenter', function(e) {
passedThroughStart = true;
}
elem.addEventListener('pointleave', function(e) {
passedThroughEnd = true;
}
answered Nov 21 '18 at 17:28
Shawn NorthropShawn Northrop
2,92643157
I don't thinktouchenter / touchleaveexist. Also, for what its worth, this guy recommends trying to limit scope of touch handler so it doesn't wreck havoc with scrolling: html5rocks.com/en/mobile/touchandmouse -- but good call on trying out touch events!
– jacob.mccrumb
Nov 21 '18 at 17:36
I specifically want pointerevents, but I also think my specific code example does not work with touch events. Feel free to provider a working example
– Dynalon
Nov 21 '18 at 17:37
I've updated but I am working on a more concise answer
– Shawn Northrop
Nov 21 '18 at 18:34
Ok... I think I have it working now ;) just updated the answer again. I have only tested this on chrome using the device mode
– Shawn Northrop
Nov 21 '18 at 19:01
I had hoped to avoid manual bounding box hit tests, but I seems there is no way around it. Works for rectangular shapes and circles, but gets awfully complex for non regular elements (i use SVGs...)
– Dynalon
Nov 21 '18 at 19:48
|
show 3 more comments
1
1
1
Try this
<script>
var startElem = document.querySelector(".start");
var endElem = document.querySelector(".end");
var elem = document.querySelector(".element");
var started = false;
var passedThroughStart = false;
var passedThroughEnd = false;
var ended = false;
startElem.addEventListener("pointerdown", function(e){
started = true;
});
window.addEventListener("pointermove", function(e) {
var x = e.clientX;
var y = e.clientY;
var bounds = elem.getBoundingClientRect();
if( !passedThroughStart &&
x > bounds.left && x < bounds.left + bounds.width &&
y > bounds.top && y < bounds.top + bounds.height
){
passedThroughStart = true;
}
if( passedThroughStart && !passedThroughEnd &&
x > bounds.left && x < bounds.left + bounds.width &&
y > bounds.top + bounds.height
){
passedThroughEnd = true;
}
})
window.addEventListener("pointerup", function(e) {
var x = e.clientX;
var y = e.clientY;
var bounds = endElem.getBoundingClientRect();
ended = ( x > bounds.left && x < bounds.left + bounds.width && y > bounds.top && y < bounds.top + bounds.height)
if( started && passedThroughStart && passedThroughEnd && ended ){
console.log("Hooray!");
}
started = false;
passedThroughStart = false;
passedThroughEnd = false;
ended = false;
});
</script>
Alternatively use pointerenter and pointerleave rather than pointermove
elem.addEventListener('pointenter', function(e) {
passedThroughStart = true;
}
elem.addEventListener('pointleave', function(e) {
passedThroughEnd = true;
}
answered Nov 21 '18 at 17:28
Shawn NorthropShawn Northrop
2,92643157
Try this
<script>
var startElem = document.querySelector(".start");
var endElem = document.querySelector(".end");
var elem = document.querySelector(".element");
var started = false;
var passedThroughStart = false;
var passedThroughEnd = false;
var ended = false;
startElem.addEventListener("pointerdown", function(e){
started = true;
});
window.addEventListener("pointermove", function(e) {
var x = e.clientX;
var y = e.clientY;
var bounds = elem.getBoundingClientRect();
if( !passedThroughStart &&
x > bounds.left && x < bounds.left + bounds.width &&
y > bounds.top && y < bounds.top + bounds.height
){
passedThroughStart = true;
}
if( passedThroughStart && !passedThroughEnd &&
x > bounds.left && x < bounds.left + bounds.width &&
y > bounds.top + bounds.height
){
passedThroughEnd = true;
}
})
window.addEventListener("pointerup", function(e) {
var x = e.clientX;
var y = e.clientY;
var bounds = endElem.getBoundingClientRect();
ended = ( x > bounds.left && x < bounds.left + bounds.width && y > bounds.top && y < bounds.top + bounds.height)
if( started && passedThroughStart && passedThroughEnd && ended ){
console.log("Hooray!");
}
started = false;
passedThroughStart = false;
passedThroughEnd = false;
ended = false;
});
</script>
Alternatively use pointerenter and pointerleave rather than pointermove
elem.addEventListener('pointenter', function(e) {
passedThroughStart = true;
}
elem.addEventListener('pointleave', function(e) {
passedThroughEnd = true;
}
answered Nov 21 '18 at 17:28
Shawn NorthropShawn Northrop
2,92643157
edited Nov 21 '18 at 20:35
answered Nov 21 '18 at 17:28
Shawn NorthropShawn Northrop
2,92643157
answered Nov 21 '18 at 17:28
Shawn NorthropShawn Northrop
2,92643157
answered Nov 21 '18 at 17:28
Shawn NorthropShawn Northrop
2,92643157
2,92643157
I don't thinktouchenter / touchleaveexist. Also, for what its worth, this guy recommends trying to limit scope of touch handler so it doesn't wreck havoc with scrolling: html5rocks.com/en/mobile/touchandmouse -- but good call on trying out touch events!
– jacob.mccrumb
Nov 21 '18 at 17:36
I specifically want pointerevents, but I also think my specific code example does not work with touch events. Feel free to provider a working example
– Dynalon
Nov 21 '18 at 17:37
I've updated but I am working on a more concise answer
– Shawn Northrop
Nov 21 '18 at 18:34
Ok... I think I have it working now ;) just updated the answer again. I have only tested this on chrome using the device mode
– Shawn Northrop
Nov 21 '18 at 19:01
I had hoped to avoid manual bounding box hit tests, but I seems there is no way around it. Works for rectangular shapes and circles, but gets awfully complex for non regular elements (i use SVGs...)
– Dynalon
Nov 21 '18 at 19:48
|
show 3 more comments
I don't thinktouchenter / touchleaveexist. Also, for what its worth, this guy recommends trying to limit scope of touch handler so it doesn't wreck havoc with scrolling: html5rocks.com/en/mobile/touchandmouse -- but good call on trying out touch events!
– jacob.mccrumb
Nov 21 '18 at 17:36
I specifically want pointerevents, but I also think my specific code example does not work with touch events. Feel free to provider a working example
– Dynalon
Nov 21 '18 at 17:37
I've updated but I am working on a more concise answer
– Shawn Northrop
Nov 21 '18 at 18:34
Ok... I think I have it working now ;) just updated the answer again. I have only tested this on chrome using the device mode
– Shawn Northrop
Nov 21 '18 at 19:01
I had hoped to avoid manual bounding box hit tests, but I seems there is no way around it. Works for rectangular shapes and circles, but gets awfully complex for non regular elements (i use SVGs...)
– Dynalon
Nov 21 '18 at 19:48
I don't think
touchenter / touchleave exist. Also, for what its worth, this guy recommends trying to limit scope of touch handler so it doesn't wreck havoc with scrolling: html5rocks.com/en/mobile/touchandmouse -- but good call on trying out touch events!– jacob.mccrumb
Nov 21 '18 at 17:36
I don't think
touchenter / touchleave exist. Also, for what its worth, this guy recommends trying to limit scope of touch handler so it doesn't wreck havoc with scrolling: html5rocks.com/en/mobile/touchandmouse -- but good call on trying out touch events!– jacob.mccrumb
Nov 21 '18 at 17:36
I specifically want pointerevents, but I also think my specific code example does not work with touch events. Feel free to provider a working example
– Dynalon
Nov 21 '18 at 17:37
I specifically want pointerevents, but I also think my specific code example does not work with touch events. Feel free to provider a working example
– Dynalon
Nov 21 '18 at 17:37
I've updated but I am working on a more concise answer
– Shawn Northrop
Nov 21 '18 at 18:34
I've updated but I am working on a more concise answer
– Shawn Northrop
Nov 21 '18 at 18:34
Ok... I think I have it working now ;) just updated the answer again. I have only tested this on chrome using the device mode
– Shawn Northrop
Nov 21 '18 at 19:01
Ok... I think I have it working now ;) just updated the answer again. I have only tested this on chrome using the device mode
– Shawn Northrop
Nov 21 '18 at 19:01
I had hoped to avoid manual bounding box hit tests, but I seems there is no way around it. Works for rectangular shapes and circles, but gets awfully complex for non regular elements (i use SVGs...)
– Dynalon
Nov 21 '18 at 19:48
I had hoped to avoid manual bounding box hit tests, but I seems there is no way around it. Works for rectangular shapes and circles, but gets awfully complex for non regular elements (i use SVGs...)
– Dynalon
Nov 21 '18 at 19:48
|
show 3 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53376909%2fpointerevents-detect-touching-through-an-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I don't think those events work on mobile at all. Try with
pointermove– ritaj
Nov 19 '18 at 14:40
Neither
pointermovenorpointeroverwill be fired when start AND end of the touch is outside the red element.– Dynalon
Nov 19 '18 at 14:41
pointeroverdoesn't work on mobile either. You will have to manually implement such logic, I'm afraid.– ritaj
Nov 19 '18 at 14:51
I hope that I understand you correctly because in your question we could misinterpret the task – it is relatively difficalt to understand the task without images. After a lot of shaman dances with a tambourine (a lot of time) I found two solutions for you.
– Bharata
Nov 22 '18 at 17:17
@Bharata I think thats unfair to claim, I provided a running snippet that works on dekstop with the mouse but not on a smartphone. What I asked for is how to get that working on a smartphone, so I think its pretty clear what my question is.
– Dynalon
Nov 23 '18 at 7:56