2013-07-25 48 views
6

我在SO和其他地方看到了很多關於右鍵單擊事件以及如何使用JavaScript來捕獲和處理它們的問題和答案,通常使用瀏覽器生成的event對象的.button屬性。我可以在HTML <button />元素上處理右鍵單擊事件嗎?

但是,我沒有發現的一件事,可能是因爲這是一個非常奇怪的請求,是如何捕捉並處理HTML <button />元素上的右鍵單擊。瀏覽器按鈕的處理方式與其他元素的處理方式不同。最重要的是,似乎右鍵單擊按鈕沒有任何作用。沒有上下文菜單,從我可以告訴的是,沒有事件。

我錯了嗎?我希望如此,因爲這會讓我的生活更輕鬆。如果沒有,我可以模擬一個div和一些CSS的按鈕,但我寧願避免它。有什麼想法嗎? (PS:這是一個愚蠢的項目,所以不要擔心我試圖把一個基於按鈕的鼠標右鍵界面放在任何客戶面前或任何東西上。我很清楚有多可怕該接口將可能)

+0

可能的重複:http://stackoverflow.com/questions/2405771/is-right-click-a-javascript-event – DevlshOne

+0

「我可以*模擬帶div的按鈕」 –

+0

在Chrome,Firefox,Opera(全部在Linux上)和Windows 7上的IE10上爲我提供'contextmenu'事件:http://jsbin.com/oduhak/1不要有早期方便的IE來檢查(太多的虛擬機已經運行)。 –

回答

10

當然,只需添加一個onmousedown監聽,檢查按下的鼠標:

JS:

document.getElementById("test").onmousedown = function(event) { 
    if (event.which == 3) { 
     alert("right clicked!"); 
    } 
} 

HTML:

<button id="test">Test</button> 

演示:http://jsfiddle.net/Jmmqz/

+1

@IanClark它在最新版本中:22.0 –

+0

哦,嗯 - 第一次對我來說不行,奇怪。 –

+0

+1它工作在ff –

5

http://jsfiddle.net/jqYN5/這是你在找什麼?添加context-menu

<input type="button" value="click me" id="btn"> 
<button id="btn2">right click</button>` 
document.getElementById('btn').onclick = function() { 
    alert('click!') 
} 

document.getElementById('btn2').oncontextmenu = function() { 
    alert('right click!') 
} 
+0

這絕對是另一種解決方法。謝謝! –

0

您可以使用 「上下文菜單」 也:

document.getElementById('btn2').oncontextmenu = function() { 
alert('right click!') 
} 
0

或者,也許有點多初學者層次的理解:

<script type="text/javascript"> 
function mouseclick(ele, e) { 
if (e.type == 'click') { 
    alert('Left Click Detected!'); 
} 
    if (e.type == 'contextmenu') { 
    alert('Right Click Detected!'); 
} 
} 
</script> 

<a href="/" 
onclick="mouseclick(this, event)" 
oncontextmenu="mouseclick(this, event)" >link name</a> 
相關問題