如何拦截使用JavaScript的各种按钮按下鼠标?

问题描述:

我工作的网络应用程序是在只有2个按钮的鼠标期间设计和开发的。现在市场上有超过3个按钮的鼠标,所有这些额外按钮在使用我们的应用程序时都会造成严重破坏。如何拦截使用JavaScript的各种按钮按下鼠标?

我的目的是让用户只按下鼠标左键并禁用鼠标上的所有其他按钮。因为我没有访问用户系统的权限,所以我必须通过浏览器本身来实现这一点(可能通过使用JavaScript)。

我该如何解决这个问题?任何指针都会很有帮助。

W3C事件模型是否足够通过event object传递鼠标信息。这意味着您实际上可以阅读哪个鼠标按钮被点击。实施例

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

使用该信息它的相当琐碎,只允许左点击,其由值1表示。

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

Hello @jAndy。感谢您的回应。我有一个有5个按钮的鼠标。该代码检测鼠标左键,中键和右键,但没有检测到鼠标左(右)侧可用按钮的点击。当我使用鼠标侧面的按钮时,Web控制台不显示任何内容。所以这些事件似乎没有被发现。或者它可能是其他原因? – Rishabh

+0

@Rishabh afaik浏览器默认只支持三键鼠标。任何其他“点击”都需要通过该鼠标制造商的特殊驱动程序或软件提供。但即使如此,我不认为这些“额外的”鼠标按钮会被浏览器识别。但是,您可以通过在文档上附加单击处理程序来尝试它,并在单击这些按钮时将事件对象记录到控制台。无论如何,如果您只想允许左键点击,无论如何您都不必关心其他点击。 – jAndy

我觉得这是你会得到禁用按钮

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'

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

这就是我们如何调整prototype.js buttonmaps以适用于所有浏览器。包括IE10中的docmode < 9.

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