将多个事件类型添加到函数中的事件侦听器

Question

我正试图了解如何最好地做到这一点。

我有一个幻灯片放映，其中有一个div来跟踪幻灯片所在的幻灯片。

我需要对上一个箭头和下一个箭头的点击次数保持一致，并在台式机和移动设备上进行拖动。

此问题与在两个台式机上拖动有关。因为mousedown不能转换为移动设备，所以我还需要弄清楚如何在事件侦听器中使用触摸事件，尽管进行了3次尝试和研究，但我还是没有。

我的最初尝试如下：

function nextSlideHandler(){
            slideCounter = (slideCounter+1)%{$slides_size};
            $('#slide-text').replaceWith({$slide_text});
            $('#slide-top-section').replaceWith({$slide_top_section});
       }

       function previousSlideHandler(){
            slideCounter = (slideCounter+{$slides_size}-1)%{$slides_size};
            $('#slide-text').replaceWith({$slide_text});
            $('#slide-top-section').replaceWith({$slide_top_section});
       }

var swipeElement = $('.n2-ss-swipe-element')[0];
        var isDown = false;
       var direction = '';
        swipeElement.addEventListener('mousedown, touchend', function(e) {
            isDown = true;
        }, true);

        document.addEventListener('mouseup, touchstart', function(e) {
          isDown = false;
          if(direction == 'left'){
            nextSlideHandler();
            }
           if(direction == 'right'){
              previousSlideHandler();
            }
            direction='';
        }, true);

        document.addEventListener('mousemove, touchmove', function(event) {
           event.preventDefault();
           if (isDown) {
           var deltaX = event.movementX;
           var deltaY = event.movementY;
           if(deltaX>0 && Math.abs(deltaX)>Math.abs(deltaY) && Math.abs(deltaX)>=10) direction = 'right';
           if(deltaX<0 && Math.abs(deltaX)>Math.abs(deltaY) && Math.abs(deltaX)>=10) direction = 'left';
         }
        }, true);

思考过程-鼠标按下等适用于桌面，而触摸事件适用于移动设备，如果其中一种事件发生则触发。

但这不起作用。幻灯片计数不会更新。

我发现https://gomakethings.com/listening-to-multiple-events-in-vanilla-js/暗示了多个事件侦听器

尽管我反复而反复无常，但还是尝试将其拆分为多个事件侦听器

function nextSlideHandler(){
            slideCounter = (slideCounter+1)%{$slides_size};
            $('#slide-text').replaceWith({$slide_text});
            $('#slide-top-section').replaceWith({$slide_top_section});
       }

       function previousSlideHandler(){
            slideCounter = (slideCounter+{$slides_size}-1)%{$slides_size};
            $('#slide-text').replaceWith({$slide_text});
            $('#slide-top-section').replaceWith({$slide_top_section});
       }

   var swipeElement = $('.n2-ss-swipe-element')[0];
    var isDown = false;
   var direction = '';

    swipeElement.addEventListener('mousedown', function(e) {
        isDown = true;
    }, true);

    swipeElement.addEventListener('touchstart', function(e) {
        isDown = true;
    }, true);

    document.addEventListener('mouseup', function(e) {
      isDown = false;
      if(direction == 'left'){
        nextSlideHandler();
        }
       if(direction == 'right'){
          previousSlideHandler();
        }
        direction='';
    }, true);

    document.addEventListener('touchend', function(e) {
      isDown = false;
      if(direction == 'left'){
        nextSlideHandler();
        }
       if(direction == 'right'){
          previousSlideHandler();
        }
        direction='';
    }, true);

    document.addEventListener('mousemove', function(event) {
       event.preventDefault();
       if (isDown) {
       var deltaX = event.movementX;
       var deltaY = event.movementY;
       if(deltaX>0 && Math.abs(deltaX)>Math.abs(deltaY) && Math.abs(deltaX)>=10) direction = 'right';
       if(deltaX<0 && Math.abs(deltaX)>Math.abs(deltaY) && Math.abs(deltaX)>=10) direction = 'left';
     }
    }, true);

    document.addEventListener('touchmove', function(event) {
       event.preventDefault();
       if (isDown) {
       var deltaX = event.movementX;
       var deltaY = event.movementY;
       if(deltaX>0 && Math.abs(deltaX)>Math.abs(deltaY) && Math.abs(deltaX)>=10) direction = 'right';
       if(deltaX<0 && Math.abs(deltaX)>Math.abs(deltaY) && Math.abs(deltaX)>=10) direction = 'left';
     }
    }, true);

这也不起作用。

我找到了这些答案：

does mousedown /mouseup in jquery work for the ipad?

Does jQuery mouseup event work on touch devices?

Using mousedown event on mobile without jQuery mobile?

到目前为止，通过这项研究，似乎我在使用触摸事件方面走上了正确的轨道。

这个答案是最有前途的：Binding multiple events to a listener (without JQuery)?，所以我在这里接受了这个想法并付诸实践：

函数nextSlideHandler（）{             slideCounter =（slideCounter + 1）％{$ slides_size};             $（'＃slide-text'）。replaceWith（{$ slide_text}）;             $（'＃slide-top-section'）。replaceWith（{$ slide_top_section}）;;        }

   function previousSlideHandler(){
        slideCounter = (slideCounter+{$slides_size}-1)%{$slides_size};
        $('#slide-text').replaceWith({$slide_text});
        $('#slide-top-section').replaceWith({$slide_top_section});
   }

   function addListenerMulti(element, eventNames, listener) {
        var events = eventNames.split(' ');
        for (var i=0, iLen=events.length; i<iLen; i++) {
        element.addEventListener(events[i], listener, false);
      }
   }

   $('.entry-content').append({$slide_top_section}).append({$slide_text});

   $('#n2-ss-{$id}-arrow-previous').on('click', $.proxy(function(e){
        e.stopPropagation();
       previousSlideHandler()}, this));

   $('#n2-ss-{$id}-arrow-next').on('click', $.proxy(function(e){
        e.stopPropagation();
       nextSlideHandler()}, this))

   var swipeElement = $('.n2-ss-swipe-element')[0];
    var isDown = false;
   var direction = '';
    swipeElement.addListenerMulti('mousedown touchstart', function(e) {
        isDown = true;
    }, true);

    document.addListenerMulti('mouseup touchend', function(e) {
      isDown = false;
      if(direction == 'left'){
        nextSlideHandler();
        }
       if(direction == 'right'){
          previousSlideHandler();
        }
        direction='';
    }, true);

    document.addListenerMulti('mousemove touchmove', function(event) {
       event.preventDefault();
       if (isDown) {
       var deltaX = event.movementX;
       var deltaY = event.movementY;
       if(deltaX>0 && Math.abs(deltaX)>Math.abs(deltaY) && Math.abs(deltaX)>=10) direction = 'right';
       if(deltaX<0 && Math.abs(deltaX)>Math.abs(deltaY) && Math.abs(deltaX)>=10) direction = 'left';
     }
    }, true);

此后，幻灯片计数仍不会更新。

如何在事件监听器中组合多种事件类型？

更新：另一种尝试：

   function nextSlideHandler(){
        slideCounter = (slideCounter+1)%{$slides_size};
        $('#slide-text').replaceWith({$slide_text});
        $('#slide-top-section').replaceWith({$slide_top_section});
   }

   function previousSlideHandler(){
        slideCounter = (slideCounter+{$slides_size}-1)%{$slides_size};
        $('#slide-text').replaceWith({$slide_text});
        $('#slide-top-section').replaceWith({$slide_top_section});
   }

   function addListenerMulti(element, eventNames, listener) {
        var events = eventNames.split(' ');
        for (var i=0, iLen=events.length; i<iLen; i++) {
          element.addEventListener(events[i], listener, false);
        }
   }

   $('.entry-content').append({$slide_top_section}).append({$slide_text});

   $('#n2-ss-{$id}-arrow-previous').on('click', $.proxy(function(e){
        e.stopPropagation();
       previousSlideHandler()}, this));

   $('#n2-ss-{$id}-arrow-next').on('click', $.proxy(function(e){
        e.stopPropagation();
       nextSlideHandler()}, this))

   var swipeElement = $('.n2-ss-swipe-element')[0];
   var isDown = false;
   var direction = '';
    addListenerMulti(swipeElement, 'mousedown touchstart', function(e) {
        isDown = true;
    }, true);

    addListenerMulti(swipeElement, 'mouseup touchend', function(e) {
      isDown = false;
      if(direction == 'left'){
        nextSlideHandler();
        }
       if(direction == 'right'){
          previousSlideHandler();
        }
        direction='';
    }, true);

    addListenerMulti(swipeElement, 'mousemove touchmove', function(event) {
       event.preventDefault();
       if (isDown) {
       var deltaX = event.movementX;
       var deltaY = event.movementY;
       if(deltaX>0 && Math.abs(deltaX)>Math.abs(deltaY) && Math.abs(deltaX)>=10) direction = 'right';
       if(deltaX<0 && Math.abs(deltaX)>Math.abs(deltaY) && Math.abs(deltaX)>=10) direction = 'left';
       console.log(direction);
     }
    }, true);

Answer 1

当我们正确调用该元素时，它似乎可以正常工作。

 const mySampleListener = (event) => {
  console.log(`Event occured: ${event.target.innerHTML}`);
 }
 
 
 function addListenerMulti(element, eventNames, listener) {
      var events = eventNames.split(' ');
      for (var i=0, iLen=events.length; i<iLen; i++) {
      element.addEventListener(events[i], listener, false);
    }
 }
 
 let events = "click keyup";
 let divs = document.querySelectorAll('.track');
 
 divs.forEach(d => {
  addListenerMulti(d, events, mySampleListener);
 })
 
 
 

<div class="track">Div 1</div>
<div  class="track">Div 2</div>
<input type="text"  class="track" />