javascript - 如何使用 JavaScript 拦截鼠标的各种按钮按下？

Question

我从事的 Web 应用程序是在只有 2 键鼠标的时期设计和开发的。现在我们在市​​场上有超过 3 个按钮的鼠标，所有这些额外的按钮都会在使用我们的应用程序时造成严重破坏。

我的意图是允许用户只按鼠标左键并禁用鼠标上的所有其他按钮。因为，我无权访问用户的系统，所以我必须通过浏览器本身（可能通过使用 JavaScript）以某种方式实现这一点。

我该如何解决这个问题？任何指针都会非常有帮助。

Answer 1

W3C 事件模型可以很好地通过event object. 这意味着您实际上可以读取单击了哪个鼠标按钮。例子

document.body.addEventListener('click', function( event ) {
    console.log('mouse button clicked: ', event.which);
}, false);

有了这些信息，只允许用 value 表示的左键单击1是相当简单的。

document.body.addEventListener('click', function( event ) {
    if( event.which === 1 ) {
        // do something
    } else {
        event.stopPropagation();
        event.preventDefault();
    }
}, false);

Answer 2

这取决于浏览器和文档模式。

这就是我们调整prototype.js 按钮映射以在所有浏览器上工作的方式。在 docmode < 9 中包括 IE10。

function _isButtonForDOMEvents(event, code) {
        return event.which ? (event.which === code + 1) : (event.button === code);
    }

    //var legacyButtonMap = { 0: 1, 1: 4, 2: 2 };
    function _isButtonForLegacyEvents(event, code) {
        switch (code) { //Fix where IE10 in DocMode lt9 caused isLeftClick to fail
            case 0: return event.button == 0 || event.button == 1;
            case 1: return event.button == 4;
            case 2: return event.button == 2;
            default: return false;
        }
    }

    function _isButtonForWebKit(event, code) {
        switch (code) {
            case 0: return event.which == 1 && !event.metaKey;
            case 1: return event.which == 2 || (event.which == 1 && event.metaKey);
            case 2: return event.which == 3;
            default: return false;
        }
    }

Answer 3

我认为这是最接近禁用按钮的方法

document.addEventListener('click', function( e ){
    if(e.which === 2 || e.which === 3) { // 2 = middle scroll button ||  3 = right click
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
});

如果它不起作用，而不是单击，您可以尝试“keydown”或“keyup”