HTML 具有超链接特征的按钮

Question

我正在寻找一种方法来使用 html 按钮的功能，我可以在其中绑定 OnClick 事件并相应地处理它，但我也在寻找我们是否可以拥有超链接功能对于该按钮，他们可以右键单击它并单击 "Open in new tab"，这将触发按钮事件但将其推送到新选项卡。

有谁知道这是否可行？

希望它看起来像这样。目前这是一个带有图像和内部跨度的按钮，具有悬停效果。

Answer 1

我不是 100% 确定我理解了这个问题，但我认为这就是你的意思..

<input type="button" id="button1" onclick="clickFunction()" value="Click Me!">

<script>
function clickFunction() {
    document.getElementById("button1").onmousedown = function(event) {
        if (event.which == 3) { <!--3 = right click-->
            window.open('target', '_blank'); <!--Opens target in a new tab-->
        }
    }
}
</script>

我不认为您可以更改弹出的上下文菜单以在右键单击时添加 "Open in new tab"，但您可以告诉您如何处理右键单击.

编辑：我相信实际上您可以更改默认的上下文菜单，但我认为如果没有第 3 方库，您无法做到这一点？再次不确定其他人是否必须给您更好的答案抱歉：/

Edit2：在看到您的初始编辑后，我同意@Surreal Dreams。使用样式并制作带有图像和悬停效果的普通 link:)

Answer 2

我会使用像按钮一样样式的 link。您可以将其设置为看起来像一个按钮并设置点击事件，以及在新选项卡中打开它。

Answer 3

也许尝试这样的事情 - 将 <a> 设置为按钮（如之前的答案所建议的那样），然后防止点击默认：

HTML

<a id = "btn" href = "http://www.google.com">CLICK ME</a>

jquery

$('#btn').click(function(e){
    e.preventDefault();
    alert('hello');
});

FIDDLE

这为您提供了 link 上的点击功能，阻止了默认操作，但保留了右键单击上下文菜单。

Answer 4

I'm looking for a way to use the functionality of a html button where I can bind the OnClick events and deal with it accordingly...

您可以将 click 处理程序绑定到几乎任何 DOM 元素。

...but I'm also looking to see if we can have hyperlink functionality for that button so they can right click on it and click "Open in new tab" which will fire off the button event but push it to a new tab.

所以使用 <a> 元素。您需要做的就是检查使用了哪个鼠标按钮，以及 Ctrl、Alt 和 Shift 键未按下（否则用户试图在新选项卡中打开 link 或其他此类快捷方式行为）。

document.querySelector('.btn').addEventListener('click', function (e) {
    if (e.button === 0 && !e.ctrlKey && !e.altKey && !e.shiftKey) {
        alert('button was clicked!');
        e.preventDefault();
    }
}, false);

.btn {
    background-color: #8CF;
    border: 1px solid #00F;
    display: inline-block;
    padding: 2px 5px;
    text-align: center;
    text-decoration: none;
}
.btn:focus {
    border-color: #000;
}

.btn__icon {
    display: block;
    margin: 0 auto;
    padding: 17px 17px 0;
}

<a href="http://example.com/" class="btn">
    <img class="btn__icon" src="http://placehold.it/40x40/FFF/000"/>
    <span class="btn__label">Details</span>
</a>

HTML 具有超链接特征的按钮

HTML Button with Hyperlink Characteristics

html

button

hyperlink

right-click