Reputation: 1
I found some solutions on StackOverflow but most of them are using jQuery. Is there any way to do this with pure JavaScript or ReactJS.
Upvotes: 0
Views: 1826
Reputation: 19059
This is basic demo for mouse events: http://codepen.io/zvona/pen/avYgJg?editors=011. You need to use onTouchStart
and onTouchEnd
as well. Also delay (currently 300ms) should be tweaked for your purposes.
var LongTouch = React.createClass({
getInitialState() {
return {
value: 'Touch me'
}
},
startTouch() {
this.touchTimeout = window.setTimeout(function() {
this.setState({
value: 'Long touch triggered'
});
}.bind(this), 300);
},
endTouch() {
window.clearTimeout(this.touchTimeout);
this.setState(this.getInitialState());
},
render() {
return (
<div
className='longTouch'
onMouseDown={this.startTouch}
onMouseUp={this.endTouch}>
{this.state.value}
</div>
)
}
});
Upvotes: 1
Reputation: 1776
I think you need to manipulate time of event yourself.
You store the time in a field of the object, and when another event happens, do some math to get the time duration.
The code below works in PC, I believe touch is the same, but the mouse pointer is invisible.
<!DOCTYPE html>
<html>
<body>
<p onmousedown="__myfunc1(event)" onmouseup="__myfunc1(event)" >
Click and hold on this paragraph.
</p>
<p>Duration: <span id="demo"></span></p>
<script>
function __myfunc1(event) {
src = event.srcElement;
if(src.__t1 != null) {
var n = event.timeStamp - src.__t1;
src.__t1 = null;
document.getElementById("demo").innerHTML = n;
}
else
src.__t1 = event.timeStamp;
}
</script>
</body>
</html>
Upvotes: 0