代码之家 › 专栏 › 技术社区 › kawnah

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

jquery javascript

kawnah · 技术社区 · 6 年前

我想知道怎样才能最好地做到这一点。

我需要有一个一致的计数,上一个和下一个箭头,并拖动桌面和移动。

这个问题与桌面移动设备上的拖动有关。因为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);

思维过程-mousedown等是针对桌面的,而触摸事件是针对移动设备的,如果其中一种事件类型发生,则触发。

我发现了 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)? 所以我把这个想法带到了这里:

slideCounter=(slideCounter+1)%{$slides_size}; $('#slide top section')。替换为({$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);

1 回复 | 直到 6 年前

Bibberty 6 年前

 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" />