使用jQuery的onclick事件：void(0)

Question

我想修改一个链接，使它在悬停在上面时显示javascript:void(0)。

$(document).ready(function(){
   if( $('.loggedinusername').length )  {
$("div#moresearches ul").append("<li id='xxx'><a href='https://exmample.org'>Link</li>");
   }
   });

我已经试过了。

$(document).ready(function(){
   if( $('.loggedinusername').length )  {
$("div#moresearches ul").append("<li id='xxx'><a href='javascript:void(0)' onclick="location.href='https://example.org'>Link</li>");
   }
   });

但似乎行不通 我注意到引号有问题，但我似乎无法解决如何使它们工作。如果你需要更多的说明，请告诉我，我很乐意提供。任何帮助将被感激。

Answer 1

这里有一个更干净的方法。总之这是一个完全错误的安全方法.把链接放在你的html中，这样。

<li id='xxx'><a href="javasctipt:void(0)" data-url="https://exmample.org" class="no-show-url" >Link</li>

然后在你的文档中准备好你就可以了。

$(document).ready(function(){
   if( $('.loggedinusername').length ){
       //I don't want you to see and follow the link
       $(".no-show-url").click(function(){
           e.preventDefault(); //not strictly necessary but reinforce the behaviour
       });
   }else{
       //you don't see but can follow the link
       var url = $(".no-show-url").data("url");
       window.location(url);
   }
});

Answer 2

你只需要把双引号转过去就可以了。

onclick=\"location.href='https://example.org'\"
     ___^___                              ___^___

不然的话，就会把生成的输出搞得一团糟，重定向也就不灵了。

演示在这里。

$("div#moresearches ul")
  .append("<li id='xxx'><a href='javascript:void(0)' onclick=\"location.href='https://example.org'\">Link</li>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="moresearches">
  <ul></ul>
</div>

Answer 3

你可以在你的锚标签上使用标题属性添加一个工具提示，只要鼠标悬停在它上面就会出现。

<li id='xxx'><a title="javasctipt:void(0)" href="https://exmample.org" >Click here </li>

我认为这是最优化的方式。