Обнаружение щелчка средней кнопкой (кнопка прокрутки) с помощью jQuery - PullRequest
Новая
       21

Обнаружение щелчка средней кнопкой (кнопка прокрутки) с помощью jQuery

17 голосов
/ 22 марта 2011

У меня есть список с тегами для воспроизведения некоторых mp3-файлов по клику. Работает нормально, когда связывается с событием click с помощью jQuery: 

$oo.data({'__mp3play':true,'wapiHandle':h+0,'wapiIndex':o.ajaxPlayList[h].length})
           .bind( 'click', function()
            { var wh = $j(this).data('wapiHandle');
              if( typeof o.regObjects[wh] == 'object' && o.regObjects[wh].play(this.href))
               { return false; }
            });

При нажатии левой кнопки мыши: Он отключает обработку по умолчанию, когда мой флэш-плагин загружен, иначе он будет открыт как обычно.

НО: Когда я использую кнопку прокрутки мыши и щелкаю по ней, событие щелчка не срабатывает, и ссылка открывается нормально.

Я пытался использовать события mousedown или mouseup, но это не помогло, ссылка всегда открывается нормально с побочным эффектом, что музыка начинает воспроизводиться также с помощью флеш-плеера.

Также preventDefault() вообще не работает.

Может кто-нибудь сказать мне, как обнаружить щелчок средней кнопки мыши (нажатие кнопки прокрутки)?

Спасибо за ваши комментарии.

PS: я уже пробовал другие решения о «средней кнопке», доступные на этом сайте.

Проверено во всех браузерах с одинаковым результатом.

EDIT: Это также не работает, ссылка будет открываться нормально при использовании средней кнопки мыши. При использовании левой кнопки мыши ничего не происходит. 

$oo.bind( 'mousedown click mouseup', function(e)
{ e.preventDefault(); e.stopPropagation(); return false; });

Ответы [ 6 ]

46 голосов
/ 22 марта 2011

Ну, после быстрого теста кажется, что три упорядочены следующим образом:

  • Слева - 1
  • Средний - 2
  • Справа - 3

Так что, если у вас было: 

$(document).mousedown(function(e){
    switch(e.which)
    {
        case 1:
            //left Click
        break;
        case 2:
            //middle Click
        break;
        case 3:
            //right Click
        break;
    }
    return true;// to allow the browser to know that we handled it.
});
7 голосов
/ 08 марта 2018

Пожалуйста, не действия с огнем щелчка во время события mousedown.Он игнорирует остальную часть конвейера событий и идет вразрез с текущими ожиданиями пользователей и методами проектирования.

Проблема

Вот взгляд на нормальный порядок событий, которые запускаются для каждого типа клика: 

$(document).on("mousedown mouseup click focus blur",function(e) {
  console.log("{" + e.which + ":" + e.type + "}"); 
});

Click Events

Как правило, мы обрабатываем самое последнее click событие, поскольку оно означает конечное намерение пользователя перейти к текущемуaction.

Событие click наступает, когда кнопка указывающего устройства ( обычно основная кнопка мыши ) нажата и отпущена на single element .

К сожалению, средние нажатия мыши не запускают такое событие (возможно потому, что это заставит разработчиков, слушающих событие click, различать несколько возможных вызовов).Но если мы хотим подключить действия к среднему щелчку, мы должны следовать тем же ожиданиям UX.

Решение

Мы будем слушать mousedown события и немедленно прикреплять вовремя использованияобработчик для mouseup событий.Если была нажата средняя клавиша и если элементы совпадают, мы запустим наше собственное пользовательское событие с типом middleclick, которое мы начнем с исходного события. 

$(document).on("mousedown", function (e1) {
  $(document).one("mouseup", function (e2) {
    if (e1.which == 2 && e1.target == e2.target) {
      var e3 = $.event.fix(e2);
      e3.type = "middleclick";
      $(e2.target).trigger(e3)
    }
  });
});

Это поможет отделить определение , если средняя кнопка была нажата с тем, как мы хотим ее обработать в этом случае, поэтому мы можем настроить слушателядля нашего пользовательского типа события, такого как: 

$(document).on("middleclick", function (e) {
    console.log("{" + e.target.nodeName.toLowerCase() + ":" + e.type + "}"); 
});

Рабочая демонстрация в jsFiddle и фрагменты стека: 

$(document).on("mousedown", function (e1) {
  $(document).one("mouseup", function (e2) {
    if (e1.which == 2 && e1.target == e2.target) {
    	var e3 = $.event.fix(e2);
      e3.type = "middleclick";
      $(e2.target).trigger(e3)
    }
  });
});

$(document).on("middleclick", function (e) {
  console.log("{" + e.target.nodeName.toLowerCase() + ":" + e.type + "}"); 
});

$(document).on("mousedown mouseup click focus blur",function(e) {
  console.log("{" + e.which + ":" + e.type + "}"); 
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

<div  style="background:#31965a;color:white;width:100px;height:100px;line-height:100px;text-align:center;">
  Click Me!
</div>

* Испытано в Chrome, FF, Edge и IE11

7 голосов
/ 22 марта 2011

Хорошо, я думаю, что понял.Вот скрипка , которая, кажется, работает .Хитрость (по крайней мере, с FF4) заключается в том, чтобы привязать обработчик кликов к document и заставить его остановить распространение. 

$(document).click(function(e){
        //not checking for the right click will prevent the context-menu from showing, you may or may not want to do that
        if (e.which != 3) { 
            e.preventDefault();
            return false;
        }
    });

Это решение было найдено на этой странице форума .

3 голосов
/ 22 марта 2011

Хорошо, ребята,

Спасибо за ваш вклад.«@ no.good.at.coding» имеет хорошее решение, но не работает в IE (см. далее в этой статье), но является хорошей отправной точкой.Я изменяю его код на это: 

// Avoid relations will be opened in extra tab when clicking middle-scroll-button to open it
$(document).bind($.browser.msie ? "mousedown" : "click", function(e)
{
    if (e.which == 2 && e.target.tagName == 'A') 
    {
        var bIE = $.browser.msie,
            $o = $(e.target),
            oe = $o.data('events'),
            b = true,
            f = function(){};

        if (typeof oe == 'object' && oe['click']) {
            f = function(){ $o.trigger('click'); }
        } else {
            b = (typeof $o[0].href == 'string' && ($o[0].target == undefined || $o[0].target == '' || $o[0].target == '_self'));
            if (b) { 
                f = function () { window.location.href=$o[0].href; };
            }
        }

        if (!b) { return; }

        e.stopImmediatePropagation();
        e.stopPropagation();
        e.preventDefault();

        if (bIE)
        {
            if (!window.__swcp__) { 
                window.__swcp__= $('<div style="position:fixed;top:0px;left:0px;width:100%;height:100%;background:#000;display:block;z-index:9999;opacity:0.01;filter:alpha(opacity:1);" />').appendTo('body'); 
            }
            window.__swcp__.show();
        }

        setTimeout(f, 50);
        if (bIE) { 
            setTimeout( function() { window.__swcp__.hide(); }, 1000 );
        }

        return false;
    }
});

Средняя кнопка теперь действует как левая кнопка мыши.Как вы видите, IE нужно еще немного, мы должны расфокусировать тег ссылки на 1 секунду, чтобы избежать его открытия в дополнительной вкладке.Я использую здесь простой способ сделать это, создать прозрачный div «для глаз» (opacity = 0.01), который будет помещен поверх содержимого окна, поэтому любая ссылка на странице будет не сфокусированной. Пользователь не заметит никакой разницы, кромечто указатель мыши может измениться с указателя на значение по умолчанию и через одну секунду он снова станет указателем (только для IE). Я могу жить с этим.

Я принимаю это как ответ, но если у вас есть идея получше,я знаю.

0 голосов
/ 16 января 2013

Если вы (как и я) нашли это из-за странных ошибок среднего клика от клиентов.И вы просто хотите, чтобы любой средний или правый щелчок вел себя как левый щелчок

Забудьте весь этот хромой код для IE.

Коротко и сладко: 

$(document).click(function(e){
  // checking for any non left click and convert to left click.
  if (e.which != 1) { 
    e.which = 1;
  }
});

Очевидно, что если вам нужно немного больше различения, вы можете сделать что-то вроде: 

$('a.no-non-left-clickies').click(function(e){
  // checking for any non left click and convert to left click.
  if (e.which != 1) { 
    e.which = 1;
  }
});
0 голосов
/ 22 марта 2011

e.which должен сделать это:

Простой пример: 

$(document).ready(function(){
    $(document).mousedown(function(e){
         alert(e.which); // ##=> left
    }) 
})
...