长按还会触发“点击"和“鼠标"

本文介绍了长按还会触发“点击"和“鼠标"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个表格行，当我单击此行时，我想具有两个功能.长按我想选择该行(添加".active_row"类)，然后单击鼠标右键，我想打开该数据集的详细信息站点.

对于长按检测，我使用发现的第三方脚本此处.只需进行少量修改，它就可以为我工作，并正确触发长按"事件.但是现在的问题仍然存在，如果我松开鼠标按钮，也会触发事件mouseup和click ...

我比较了自动触发的长按单击和手动触发的事件的详细信息，它们是相同的.所以我不能以此来区分它.

有什么想法吗?

第三方脚本会在按下鼠标按钮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 * github/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>

在这里摆弄小提琴: jsfiddle/2q7430sy/(因为单击不起作用在stackoverflow代码段中)

i have a table row and i want to have two functions when i click onto this. With a long-press i want to select the row (add an ".active_row" class) and with a normal click i want to open the details site for this dataset.

For the long-press detection i use the third party script found here. With little modifications it works for me and fires the event "long-press" correctly. But the problem now ist, if i release the mousebutton the events mouseup and click are fired too...

i compared the event-details of the automatic fired after-longpress-click and the manual fired click and they are identic. So i cant distinguish it with this.

Any ideas?

the third party script fires the custom long-press event with this after the mousebutton is down for 500ms. it uses the events mousedown and a simple timeout-funtion:

this.dispatchEvent(new CustomEvent('long-press', { bubbles: true, cancelable: true }));

解决方案

You can do something like that :

// 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 * github/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>

A fiddle here : jsfiddle/2q7430sy/ (because click do not work in stackoverflow code snippet)