具有超链接特征的HTML按钮

Question

我正在寻找一种方法来使用html按钮的功能，我可以绑定OnClick事件并相应地处理它，但我也想看看我们是否可以为该按钮提供超链接功能，这样他们就可以右键单击它并单击“在新选项卡中打开”，这将触发按钮事件，但将其推送到新选项卡。

有人知道这是否可行？

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

Answer 1

  

我正在寻找一种方法来使用html按钮的功能，我可以绑定OnClick事件并相应地处理它......

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

  

...但我也想看看我们是否可以为该按钮添加超链接功能，以便他们可以右键单击它并点击＆＃34;在新标签中打开＆＃34;这将触发按钮事件，但将其推送到新选项卡。

因此请使用<a>元素。您需要做的就是检查使用了哪个鼠标按钮， Ctrl ， Alt 和 Shift 键不< / em>已按下（否则用户正在尝试在新选项卡中打开链接，或其他此类快捷方式行为）。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我会使用像按钮一样的链接。您可以将其设置为按钮并设置点击事件，并在新标签中打开它。

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

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

Answer 4

我不是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>

我不会认为您可以更改弹出的上下文菜单以添加＆＃34;在新标签中打开＆＃34;右键单击，但您可以告诉如何处理右键单击。

编辑：实际上你可以更改我认为的默认上下文菜单但我不认为你可以在没有第三方库的情况下做到这一点吗？再次不确定其他人是否必须给你一个更好的答案抱歉：/

编辑2：在看到您的初始编辑后，我同意@Surreal Dreams。使用样式并与图像和悬停效果建立正常链接：）