[英]Including both href and onclick to HTML <a> tag
If I have this element:如果我有这个元素:
<a href="www.mysite.com" onClick="javascript.function();">Item</a>
How can I make both href
and onClick
work, preferably with onClick
running first?如何使
href
和onClick
都工作,最好先运行onClick
?
You already have what you need, with a minor syntax change:您已经有了所需的东西,只需稍加修改语法即可:
<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>
The default behavior of the <a>
tag's onclick
and href
properties is to execute the onclick
, then follow the href
as long as the onclick
doesn't return false
, canceling the event (or the event hasn't been prevented) <a>
标签的onclick
和href
属性的默认行为是执行onclick
,然后只要onclick
不返回false
就遵循href
,取消事件(或事件未被阻止)
Use jQuery .使用jQuery 。 You need to capture the
click
event and then go on to the website.您需要捕获
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>
To achieve this use following html:要实现此目的,请使用以下 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>
Here is working example .这是工作示例。
No jQuery needed.不需要jQuery。
Some people say using onclick
is bad practice... 有人说使用
onclick
是不好的做法...
This example uses pure browser javascript.此示例使用纯浏览器 javascript。 By default, it appears that the click handler will evaluate before the navigation, so you can cancel the navigation and do your own if you wish.
默认情况下,单击处理程序似乎会在导航之前进行评估,因此您可以取消导航并根据需要执行自己的操作。
<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>
Use a <button>
instead.请改用
<button>
。 In general, you should only use a hyperlink for navigation to a real URL.通常,您应该只使用超链接导航到真正的 URL。
We can style a button to look like an anchor element.我们可以设置一个按钮看起来像一个锚元素。
From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#onclick_events来自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#onclick_events
Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events.锚元素经常被滥用为假按钮,通过将它们的 href 设置为 # 或 javascript:void(0) 来防止页面刷新,然后监听它们的点击事件。
These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled.当复制/拖动链接、在新选项卡/窗口中打开链接、添加书签或 JavaScript 正在加载、出错或被禁用时,这些虚假的 href 值会导致意外行为。 They also convey incorrect semantics to assistive technologies, like screen readers.
它们还会向屏幕阅读器等辅助技术传达不正确的语义。
Use ng-click
in place of onclick
.使用
ng-click
代替onclick
。 and its as simple as that:就这么简单:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.