使用javascript修改onclick链接

Question

我正在使用下面的代码将href更改为onclick：

$('.sidenav li a').each(function() {
     var href = $(this).attr('href');
     $(this).attr('onclick', href)
       .removeAttr('href');
}); 

这可以完成工作，但是我无法解决如何更改附加到它的onclick函数的方法。 当前，它使用href链接并将其分配给onlick，例如onclick="https://stackoverflow.com/"

如果有人对如何更改此方法有任何想法，那就太好了！

谢谢-斯科特

Answer 1

我不知道这对您有没有帮助，但您可以尝试一下。

 $(".sidenav li a").each(function() { var href = $(this).attr('href'); $(this).attr('onclick', `print(${JSON.stringify(href)})`) .removeAttr('href'); }); function print(href) { console.log('Clicked on', href); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="sidenav"> <li> <a href="http://example.com">Test</a> </li> </ul> 

Answer 2

onclick需要一些JavaScript字符串形式。 刺鼻的纳赫德的解决方案应该可以正常工作。 但是，我想知道这是否真的是您想要的。 以后再说。

要回答您的问题，您可能要直接向DOM元素添加事件侦听器，而不是更改onclick属性：

 $('.sidenav li a').each(function() { const el = $(this); const href = el.attr('href'); el[0].addEventListener('click', () => location.replace(href)); el.removeAttr('href'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="sidenav"> <li> <a href="http://example.com">test</a> </li> </ul> 

---

即使没有jQuery，您也可以这样做：

 document.querySelectorAll('.sidenav li a').forEach((el) => { const href = el.getAttribute('href'); el.addEventListener('click', () => location.replace(href)); el.removeAttribute('href'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="sidenav"> <li> <a href="http://example.com">test</a> </li> </ul> 

但是，我想知道您是否真的想这样做。 您可以轻松地阻止点击，并使用href做任何您想做的事情。 考虑以下：

 document.querySelector('.sidenav').addEventListener('click', (event) => { // Check if we are clicking on an <a> tag if (event.target.tagName !== 'A') { return; } // Prevent the actual click and the navigation away from the current page event.preventDefault(); // Get and print the href of the link we clicked on console.log('Clicked on', event.target.getAttribute('href')); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="sidenav"> <li> <a href="http://example.com">test</a> </li> </ul>