包括 href 和 onclick to HTML < a > 标记

如果我有这个元素:

<a href="www.mysite.com" onClick="javascript.function();">Item</a>

如何使 hrefonClick都能正常工作,最好是先运行 onClick

651818 次浏览

您已经拥有了所需的东西,只需要稍微修改一下语法:

<a href="www.mysite.com" onclick="return theFunction();">Item</a>


<script type="text/javascript">
function theFunction () {
// return true or false, depending on whether you want to allow the `href` property to follow through or not
}
</script>

<a>标签的 onclickhref属性的默认行为是执行 onclick,然后跟随 href,只要 onclick不返回 false,取消事件(或者事件没有被阻止)

使用 JQuery。你需要捕捉 click事件,然后进入网站。

$("#myHref").on('click', function() {
alert("inside onclick");
window.location = "http://www.google.com";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myHref">Click me</a>

为了达到这个目的,使用以下 html:

<a href="www.mysite.com" onclick="make(event)">Item</a>


<script>
function make(e) {
// ...  your function code
// e.preventDefault();   // use this to NOT go to href site
}
</script>

这里是 工作范例

使用 ng-click代替 onclick。它就是这么简单:

<a href="www.mysite.com" ng-click="return theFunction();">Item</a>


<script type="text/javascript">
function theFunction () {
// return true or false, depending on whether you want to allow
// the`href` property to follow through or not
}
</script>

不需要 jQuery。

有人说使用 onclick是不好的做法..。

此示例使用纯浏览器 javascript。默认情况下,单击处理程序将在导航之前进行计算,因此您可以取消导航并根据自己的需要进行导航。

<a id="myButton" href="http://google.com">Click me!</a>
<script>
window.addEventListener("load", () => {
document.querySelector("#myButton").addEventListener("click", e => {
alert("Clicked!");
// Can also cancel the event and manually navigate
// e.preventDefault();
// window.location = e.target.href;
});
});
</script>

一般来说,你应该只使用一个超链接来导航到一个真实的 URL。

我们可以将按钮设计成锚元素的样式。

来自 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#onclick_events

锚元素经常被滥用为假按钮,通过将 href 设置为 # 或 javascript: void (0)来阻止页面刷新,然后监听它们的单击事件。

这些伪造的 href 值在复制/拖动链接、在新的选项卡/窗口中打开链接、书签或 JavaScript 加载、错误或禁用时导致意外行为。它们还向辅助技术(如屏幕阅读器)传递不正确的语义。