Html 如果执行 onclick，如何禁用 HREF？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15622100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I disable HREF if onclick is executed?
提问by Supuhstar
I have an anchor with bothHREFand ONCLICKattributes set. If clicked and Javascript is enabled, I want it to onlyexecute ONCLICKand ignore HREF. Likewise, if Javascript is disabled or unsupported, I want it to follow the HREFURL and ignore ONCLICK. Below is an example of what I'm doing, which would execute the JS and follow the link concurrently (usually the JS is executed and then the page changes):
我有一个同时设置了HREF和ONCLICK属性的锚点。如果单击并启用 Javascript，我希望它只执行ONCLICK并忽略HREF. 同样，如果 Javascript 被禁用或不受支持，我希望它遵循HREFURL 并忽略ONCLICK. 下面是我正在做的一个例子，它会执行 JS 并同时跟踪链接（通常是执行 JS 然后页面更改）：
<A HREF="http://example.com/no-js-login" ONCLICK="yes_js_login()">Log in</A>
what's the best way to do this?
这样做的最佳方法是什么？
I'm hoping for a Javascript answer, but I'll accept any method as long as it works, especially if this can be done with PHP.
I've read "a href link executes and redirects page before javascript onclick function is able to finish" already, but it only delays HREF, but doesn't completely disable it. I'm also looking for something much simpler.
我希望得到一个 Javascript 答案，但我会接受任何有效的方法，特别是如果这可以用 PHP 完成。我已经阅读过“在 javascript onclick 功能能够完成之前，href 链接执行并重定向页面”，但它只是延迟HREF，但并没有完全禁用它。我也在寻找更简单的东西。
采纳答案by elproduc3r
You can use the first un-edited solution, if you put return first in the onclickattribute:
您可以使用第一个未编辑的解决方案，如果您将 return 首先放在onclick属性中：
<a href="https://example.com/no-js-login" onclick="return yes_js_login();">Log in</a>
yes_js_login = function() {
// Your code here
return false;
}
Example: https://jsfiddle.net/FXkgV/289/
回答by Chris Bier
yes_js_login = function() {
// Your code here
return false;
}
If you return false it should prevent the default action (going to the href).
如果您返回 false，它应该阻止默认操作（转到 href）。
Edit:Sorry that doesn't seem to work, you can do the following instead:
编辑：抱歉，这似乎不起作用，您可以改为执行以下操作：
<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>
回答by Buksy
Simply disable default browser behaviour using preventDefaultand pass the eventwithin your HTML.
只需使用preventDefault并event在您的 HTML 中传递默认浏览器行为即可。
<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>
<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>
yes_js_login = function(e) {
e.preventDefault();
}
回答by Andrew
<a href="http://www.google.com" class="ignore-click">Test</a>
with jQuery:
使用 jQuery：
<script>
$(".ignore-click").click(function(){
return false;
})
</script>
with JavaScript
使用 JavaScript
<script>
for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
event.preventDefault();
return false;
});
}
</script>
You assign class .ignore-clickto as many elements you like and clicks on those elements will be ignored
您将类分配给.ignore-click您喜欢的任意数量的元素，并且将忽略对这些元素的点击
回答by mishanon
You can use this simple code:
您可以使用这个简单的代码：
<a href="" onclick="return false;">add new action</a><br>
回答by Trigon219
It's simpler if you pass an event parameter like this:
如果您传递这样的事件参数会更简单：
<a href="#" onclick="yes_js_login(event);">link</a>
function yes_js_login(e) {
e.stopImmediatePropagation();
}
回答by marlo
This might help. No JQuery needed
这可能会有所帮助。 不需要 JQuery
<a href="../some-relative-link/file"
onclick="this.href = 'https://docs.google.com/viewer?url='+this.href; this.onclick = '';"
target="_blank">
This code does the following: Pass the relative link to Google Docs Viewer
此代码执行以下操作： 将相对链接传递给Google 文档查看器
- Get the full link version of the anchor by
this.href - open the link the the new window.
- 通过以下方式获取锚点的完整链接版本
this.href - 在新窗口中打开链接。
So in your case this might work:
所以在你的情况下，这可能有效：
<a href="../some-relative-link/file"
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); "
target="_blank">
回答by Bo Johanson
I solved a situation where I needed a template for the element that would handle alternatively a regular URL or a javascript call, where the js function needs a reference to the calling element. In javascript, "this" works as a self reference only in the context of a form element, e.g., a button. I didn't want a button, just the apperance of a regular link.
我解决了一种情况，我需要一个元素模板来处理常规 URL 或 javascript 调用，其中 js 函数需要对调用元素的引用。在 javascript 中，“this”仅在表单元素（例如按钮）的上下文中用作自引用。我不想要一个按钮，只是一个普通链接的外观。
Examples:
例子：
<a onclick="http://blahblah" href="http://blahblah" target="_blank">A regular link</a>
<a onclick="javascript:myFunc($(this));return false" href="javascript:myFunc($(this));" target="_blank">javascript with self reference</a>
The href and onClick attributes have the same values, exept I append "return false" on onClick when it's a javascript call. Having "return false" in the called function did not work.
href 和 onClick 属性具有相同的值，除了当它是一个 javascript 调用时，我在 onClick 上附加“return false”。在被调用的函数中“返回假”不起作用。
回答by Zero
This worked for me:
这对我有用：
<a href="" onclick="return false;">Action</a>
回答by Jorge Santos Neill
In my case, I had a condition when the user click the "a" element. The condition was:
就我而言，当用户单击“a”元素时，我遇到了一个条件。条件是：
If other section had more than ten items, then the user should be not redirected to other page.
如果其他部分有十多个项目，则不应将用户重定向到其他页面。
If other section had less than ten items, then the user should be redirected to other page.
如果其他部分的项目少于 10 个，则应将用户重定向到其他页面。
The functionality of the "a" elements depends of the other component. The code within click event is the follow:
“a”元素的功能取决于其他组件。点击事件中的代码如下：
var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
return true;
}else{
event.preventDefault();
return false;
}
