是否可以右鍵單擊表單元素以打開新頁面？

我創建了一個按鈕，我想表現得像一個鏈接，但它無法用鼠標右鍵點擊：是否可以右鍵單擊表單元素以打開新頁面？

enter image description here

我怎樣才能使人們有可能用鼠標右鍵單擊該元素創建一個鏈接，而不是「回去」等？我現在使用的代碼是：

<form action="/ai" method="get"> 
    <input type="submit" class="btn primary" name="psearchsub" value="Post your ad for free"/> 
</form>

來源

2013-05-18 Niklas Rosencrantz

這種特殊的按鈕就可以輕易地轉化成一個鏈接（''Post your ad），並與CSS樣式仍然看起來像一個按鈕。問題就會解決。 – Jon

正如Jon在你的問題的評論中建議的那樣，你可以直接設計<a>。如果你想用鼠標右鍵單擊事件，勾oncontextmenu和防止默認動作：

<a href="http://leftclicklocation.com" id="ad">Post your ad for free</a> 
<script> 
    document.getElementById("ad").addEventListener("contextmenu",function(e) { 
    e.preventDefault(); // to supress the default context menu 
    window.location = "http://rightclicklocation.com"; // whatever you want 
    }); 
</script>

這裏是

#ad { 
    display: inline-block; 
    border: 1px solid black; 
    width: 200px; 
    height: 25px; 
    text-decoration: none; 
    text-align: center; 
    color: white; font-weight: bold; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    background: #6db3f2; /* Old browsers */ 
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0); /* IE6-9 */ 
}

我用css3generator和gradient editor

來源

2013-05-18 00:18:38

謝謝你的答案。但是，我如何直接設計a？我不知道該怎麼做 - –

@NickRosencrantz查看我的更新回答 –

它工作的很好。謝謝！ –

編輯：對不起，我想我錯誤地解釋了你的帖子。你想想能夠右鍵點擊按鈕，或者你不希望用戶能夠右鍵單擊按鈕嗎？

原文：這裏 只是一個想法 - 嘗試使用oncontextmenu="return false;" - 應該防止右擊如果我沒有記錯。（當然，如果你願意使用一個小小的javascript）

來源

2013-05-18 00:13:39 Singular1ty

是的，我希望它能夠像鏈接一樣右鍵單擊，但現在它表現得像一個表單元素。 –

不，'onclick =「return false」'不會停止上下文菜單。 –

@JanTuroň謝謝，我會糾正我的帖子... – Singular1ty

風格將一個事件監聽器表單元素。

$('form').on('click', function(e){ 
    //detects right click 
    if (e.originalEvent.button = 2) { 
    window.location = 'http://newpage.com' 
    } 
});

如下所述，你可能要重寫文本菜單（不知道你能做到這一點）

來源

2013-05-18 00:19:25 eighteyes

這不起作用。我可能應該爲這個問題做一個小提琴。 –

@NickRosencrantz他正在使用jQuery –

應該是'e.originalEvent.button == 2' –

是否可以右鍵單擊表單元素以打開新頁面？

回答

相關問題