如何让一个 HTML<a>元素有一个 href 但默认为 Onclick？</a>
[英]How To Make A HTML <a> Element Have A href But Default to Onclick?
问题描述
I have an <a> inside my html page.
我的 html 页面中有一个<a> 。 I wrote a custom redirector in JavaScript, so that when you click the button, it runs a javascript function that performs important tasks before redirecting you.我用 JavaScript 编写了一个自定义重定向器，因此当您单击按钮时，它会运行一个 javascript 函数，该函数在重定向您之前执行重要任务。 For example:例如：
function go(page) { alert("You are being redirected!") // Important things here, such as saving open(page, target="_self") }
a { color: blue; text-decoration: underline; cursor: pointer; }
Link: <a onclick="go('/nextPage')">Click me to go to the next page!</a>
In the above example, the link runs the script to execute the functions then opens the URL.在上面的示例中，链接运行脚本以执行函数，然后打开 URL。 However, if you right click the link, there is no 'open in new tab' option like other links, because it doesn't have a href .但是，如果您右键单击该链接，则没有像其他链接那样的“在新标签页中打开”选项，因为它没有href 。 If there is a href , it goes to the next tab without running the js.如果有href ，它会在不运行 js 的情况下转到下一个选项卡。 Is it possible to make it so it has a href so the right-click works, but still run the JS?是否有可能让它有一个 href 以便右键单击工作，但仍然运行 JS？ So basically, it would give authority to the onclick event, not running the href unless a right-click happens.所以基本上，它会给onclick事件授权，除非发生右键单击，否则不会运行href 。
I tried removing the onclick and using href="javascript:go('/nextPage);"我尝试删除onclick并使用href="javascript:go('/nextPage);" instead, but right clicking causes it to go to about:blank#blocked in chrome.相反，但右键单击会使其转到about:blank#blocked in chrome。
2 个解决方案
解决方案1
1 2021-07-09 14:37:10
Don't use onclick .不要使用onclick 。 Instead, add a click event listener on all anchor tags that prevents the default action (via e.preventDefault() ) and instead calls the go function.相反，在所有锚标签上添加一个click事件侦听器，以防止默认操作（通过e.preventDefault() ）并调用go函数。
function go(page) { alert("You are being redirected!") // Important things here, such as saving open(page, target = "_self") } document.querySelectorAll('a').forEach((f) => { f.addEventListener('click', function(e) { e.preventDefault(); go(this.getAttribute('href')); }) })
a { color: blue; text-decoration: underline; cursor: pointer; }
Link: <a href="https://stacksnippets.net">Click me to go to the next page!</a>
解决方案2
0 已采纳 2021-07-09 14:47:15
Sorry about the HTML, I had to try different editors to check results.对 HTML 感到抱歉，我不得不尝试不同的编辑器来检查结果。
Try this试试这个
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <script> function go(page) { alert("You are being redirected!") // Important things here, such as saving return false; // equivalent to preventDefault } </script> <body> <a href='http://www.example.com' onclick='return go()'>Click me to go to the next page!</a> </body> </html>
Or要么
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <script> function go(event) { if( !confirm(`Redirect to ${event.target.href} ?`) ) event.preventDefault(); } </script> <body> <a href='/example' onclick="go(event)"> Click me to go to the next page! </a> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.