webentwicklung-frage-antwort-db.com.de

Mit jQuery das Klicken der mittleren Taste (Scroll-Taste) erkennen

Ich habe eine Liste mit Tags, um einige MP3-Dateien beim Klicken abzuspielen. Es funktioniert gut, wenn Sie das Ereignis 'click' mit jQuery binden:

$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; }
            });

Wenn Sie mit der linken Maustaste klicken: Deaktiviert die Standardbehandlung, wenn mein Flash-Plugin geladen ist. Andernfalls wird es normal geöffnet.

ABER: Wenn ich den Scrollbutton der Maus verwende und darauf klicke, wird das Click-Ereignis nicht ausgelöst und der Link wird normal geöffnet.

Ich habe versucht, Mousedown- oder Mouseup-Events zu verwenden, hilft aber nicht. Der Link öffnet sich normalerweise mit dem Nebeneffekt, dass die Musik auch mit dem Flash-Player abgespielt wird.

Auch funktioniert preventDefault() überhaupt nicht.

Kann mir jemand sagen, wie man das Klicken mit der mittleren Maustaste erkennt (Klick auf die Bildlaufschaltfläche)?

Vielen Dank für Ihre Kommentare.

PS: Ich habe bereits andere Lösungen über den "mittleren Knopf" auf dieser Seite ausprobiert.

In allen Arten von Browsern mit dem gleichen Ergebnis getestet. 

EDIT: Dies funktioniert auch nicht, der Link wird normal geöffnet, wenn Sie die mittlere Maustaste drücken. Bei Verwendung der linken Maustaste passiert nichts. 

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

Okay Jungs,

Danke für deinen Beitrag. '@ no.good.at.coding' hat eine Lösung von Nice, funktioniert aber nicht mit IE (siehe weiter unten), ist aber ein guter Ausgangspunkt. Ich ändere seinen Code so:

// 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;
    }
});

Die mittlere Taste verhält sich jetzt wie die linke Maustaste. Wie Sie sehen, dass IE etwas mehr braucht, müssen wir das Link-Tag 1 Sekunde lang fokussieren, um zu verhindern, dass es in einem zusätzlichen Tab geöffnet wird. Ich verwende hier einen einfachen Weg, um dies zu tun, ein transparentes div ("opacity = 0.01") für das Auge zu erstellen, das über dem Fensterinhalt platziert wird, sodass jeder Link auf der Seite unscharf wird Kein Unterschied, außer dass der Mauszeiger vom Zeiger auf den Standardwert wechseln kann und nach einer Sekunde wieder in den Zeiger wechselt (nur IE). Ich kann damit leben. 

Ich akzeptiere dies als Antwort, aber wenn Sie eine bessere Idee haben, lassen Sie es mich wissen.

3
Codebeat

Nun, nach einem kurzen Test scheint es, dass die drei wie folgt angeordnet sind:

  • Links - 1
  • Mitte - 2
  • Richtig - 3

Wenn Sie also hätten:

$(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.
});
45
RobertPitt

Ok, ich glaube ich habe es verstanden. Hier ist eine Geige, die zu funktionieren scheint . Der Trick (zumindest mit FF4) scheint darin zu bestehen, einen Click-Handler an die Variable document zu binden und die Ausbreitung zu stoppen.

$(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;
        }
    });

Diese Lösung wurde auf dieser Forumsseite gefunden .

7

Bitte nicht feuert Klickaktionen während des mousedown-Ereignisses. Es ignoriert den Rest der Event-Pipeline und widerspricht den aktuellen Benutzererwartungen und Designpraktiken.

Problem

Hier sehen Sie die normale Reihenfolge der Ereignisse, die für jeden Klick-Typ ausgelöst werden:

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

 Click Events

Normalerweise behandeln wir das letzte click -Ereignis, da es dem Benutzer die endgültige Absicht signalisiert, mit der aktuellen Aktion fortzufahren.

Das click-Ereignis wird ausgelöst, wenn eine Zeigegerätetaste (in der Regel die primäre Taste einer Maus) gedrückt und losgelassen wird auf einem Einzelelement.

Leider löst ein mittleres Drücken der Maus ein solches Ereignis nicht aus (wahrscheinlich, weil Entwickler dazu gezwungen werden, das Klickereignis anzuhören, um zwischen mehreren möglichen Aufrufen zu unterscheiden). Wenn wir jedoch Aktionen gegen den mittleren Klick durchführen möchten, sollten wir denselben UX-Erwartungen folgen.

Lösung

Wir hören auf mousedown-Ereignisse und fügen sofort einen pünktlichen Nutzungshandler für mouseup-Ereignisse hinzu. Wenn die mittlere Taste gedrückt wurde und die Elemente übereinstimmen, werden wir trigger unser eigenes benutzerdefiniertes Ereignis mit dem Typ middleclick, den wir seed vom ursprünglichen Ereignis verwenden.

$(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)
    }
  });
});

Dies hilft bei der Bestimmung von if, dass der mittlere Button angeklickt wurde, und wie wir ihn in diesem Fall behandeln wollen, sodass wir einen Listener für unseren benutzerdefinierten Ereignistyp wie folgt einrichten können:

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

Arbeitsdemo in jsFiddle und Stack-Snippets:

$(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>

* Getestet in Chrome, FF, Edge und IE11

4
KyleMit

was soll es tun?

Einfaches Beispiel:

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