我有一个表行,当我单击此行时,我想具有两个功能。长按时,我想选择该行(添加“ .active_row”类),然后单击鼠标右键,以打开该数据集的详细信息站点。
对于长按检测,我使用发现的第三方脚本here。只需进行少量修改,它就可以为我工作,并正确触发“长按”事件。但是现在的问题仍然存在,如果我松开鼠标按钮,也会触发事件mouseup和click ...
i比较了自动触发的长按单击和手动触发的事件的详细信息,它们是相同的。因此,我无法与此区别。
有什么想法吗?
第三方脚本会在按下鼠标按钮500毫秒后触发此自定义长按事件。它使用事件mousedown和简单的超时功能:
this.dispatchEvent(new CustomEvent('long-press', { bubbles: true, cancelable: true }));
您可以执行类似的操作:
// listen for long-press events
document.addEventListener('long-press', function(e) {
e.target.classList.toggle('selected');
e.target.setAttribute('data-long-pressed', true);
});
// listen for long-press events
document.addEventListener('click', function(e) {
if ( e.target.getAttribute('data-long-pressed') ) {
e.preventDefault() ;
e.stopPropagation() ;
e.target.removeAttribute('data-long-pressed');
}
// What you whant here
}, true);
/*!
* long-press.js
* Pure JavaScript long-press event
* https://github.com/john-doherty/long-press
* @author John Doherty <www.johndoherty.info>
* @license MIT
*/
!function(t,e){"use strict";function n(){this.dispatchEvent(new CustomEvent("long-press",{bubbles:!0,cancelable:!0})),clearTimeout(o),console&&console.log&&console.log("long-press fired on "+this.outerHTML)}var o=null,s="ontouchstart"in t||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0,u=s?"touchstart":"mousedown",a=s?"touchcancel":"mouseout",i=s?"touchend":"mouseup";"initCustomEvent"in e.createEvent("CustomEvent")&&(t.CustomEvent=function(t,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var o=e.createEvent("CustomEvent");return o.initCustomEvent(t,n.bubbles,n.cancelable,n.detail),o},t.CustomEvent.prototype=t.Event.prototype),e.addEventListener(u,function(t){var e=t.target,s=parseInt(e.getAttribute("data-long-press-delay")||"1500",10);o=setTimeout(n.bind(e),s)}),e.addEventListener(i,function(t){clearTimeout(o)}),e.addEventListener(a,function(t){clearTimeout(o)})}(this,document);
.dock-item {
font-size: 14px;
font-family: arial;
display: inline-block;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
width: 70px;
height: 70px;
border-radius: 3px;
text-align: center;
user-select: none;
}
.selected{
background-color: red;
}
<a class="dock-item" data-long-press-delay="500" href='/' target='_blank'>Press and hold me for .5s</a>
<a class="dock-item" href='/' target='_blank'>Press and hold me for 1.5s</a>
<a class="dock-item" data-long-press-delay="5000" href='/' target='_blank'>Press and hold me for 5s</a>
这里有个小提琴:https://jsfiddle.net/2q7430sy/(因为在堆栈溢出代码段中单击不起作用)