jQuery中的href和onclick分离问题

Question

jQuery中的href和onclick分离问题

7

我有这样的代码

<a id="id101" href="javascript:func1();" onclick="return func2();">Link</a>

func2返回true或false。只有在func2返回true时才调用func1。对吗？

在学习jquery时，我发现onclick不好用且已被弃用，所以我修改了上面的代码为

<a id="id101" href="javascript:func1();">Link</a>

jquery
$("#id101").click(func2() {
  //same stuffs from before which was in func2
});

现在，我的问题是：

在处理完点击处理程序之后，我该如何处理 href 中的 JavaScript？当 func2 内部条件为 true 时，我是否应该在 jQuery click 处理程序中调用 func1 来调用 func2？还是有其他更优美的解决方案？

另外，分离 HTML 和事件代码是好的，但是具有 id101 的这个元素可能与许多事件相关联，在大文件中，可能会有许多带有许多事件的 HTML 元素。因此，当我有一个具有许多事件处理程序的大页面时，如何更好地知道哪个 HTML 元素具有哪些事件？

以上问题的更多解释，

我指的是 id101 可能具有 onclick、onmouseover、onmouseout 和许多其他类似的事件。可能会有许多这样的元素具有许多此类事件处理程序。我应该如何更好地发现它们？在旧风格中，所有这些事件处理程序都放在一起，就像这样：

<a id="id101" href="javascript:func1();" onclick="return func2();">Link</a>.

我不是说这很好，但至少我可以看到它有这个 onclick 事件。但现在将其分离为 jQuery 文件时，我必须首先搜索此 jQuery 文件以查找 id101，然后检查与其关联的事件，这可能是包含许多元素和相关事件处理程序的 HTML 文件的问题。是否有更好的方法来查找这些信息？

- newcoderintown

不要将 JavaScript 直接放在 "href" 中。只需在事件处理程序中执行此操作（如果需要的话）。 - Pointy

@endroix：正如Pointy所说，只需删除整个href属性。内联JS是坏消息。当您使用jQuery选择器绑定时，必须使用“＃”表示ID。现在，您的jQuery很可能什么也没做。将其更改为$（“#id101”）.click（）;，并删除整个href =“x”。 - Josh

@Josh，我忘记了 #。现在已经更新。 - newcoderintown

3个回答

2

我能告诉你的是，这段代码很“臭”--你不想让你的JavaScript像这样到处都是。我建议你再花几个小时学习一些jQuery的基础知识，然后继续前进。我知道这可能很令人沮丧，特别是如果你正在使用旧版的JavaScript。

- user785262

2

是的，我建议你将func1写在func2内部。

<a id="id101" href="#" >Link</a>

jQuery

$("#id101").click(func2() {
   var status = false;
   //func2 goes here and modifies status value.
   if (status) {
       // func1 goes here
   } else {
       // in case if status is false.
   }

});

另外，我没有理解你在问题的第二部分想表达什么意思，请您能否更加具体地说明一下。

- Cyberon

实际上，事件和处理程序没有理论上的限制。只需为它们创建处理程序即可。如果有很多应该具有JavaScript处理程序的链接，则可以尝试收集它们，例如<a href="#" class="function_1_class">Link</a> <a href="#" class="function_2_class">Link 2</a>。此外，如果您需要对所有问题执行特定工作，则建议使用另一个属性来标识单击了哪个链接。<a href="#" class="some_class" my_unique_id="q4Rf9" 并使用.attr()获取此属性。 - Cyberon

如果您不希望通过单击此链接（因为它引用“＃”）使页面跳转到顶部，则可以尝试使用类似于<span id="id101">链接</span>的内容。只需将此span样式化，使其看起来像一个链接即可。 - odaa

@otta：是的，我已经了解到在 href 中使用 # 是不好的做法。在 span 中使用并进行样式设置是一个不错的解决方案。 - newcoderintown

@VahagnMkrtchyan 我不明白使用 my_unique_id 的重要性。相比使用普通 id，它有什么优势？ - newcoderintown

1

@odaa，或者从处理程序返回false以防止默认操作，即跳转到顶部。 - Brigand

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh · Accepted Answer

如果我理解正确，您想避免内联JavaScript，但也想能够快速浏览a并知道它是否绑定了事件。不幸的是，没有可接受的方法来表示这一点，因为内联JavaScript很糟糕。也许您可以只给元素一个虚拟类来帮助您未来的可读性。除此之外，请忘记整个func1和func2的事情。只需在点击绑定中使用匿名函数即可。

<a id="some_id" class="optional_has_click">Click Me</a>

<script type="text/javascript">
  $(document).ready(function(){

    $("#some_id").click(function(){

      // do something
      alert( $(this).attr("id") );

    });

  });
</script>

编辑： 此外，去掉 href 将会移除视觉提示，所以你可以使用虚拟类来模仿 a 的样式。

这里有一个 jsfiddle 链接供您参考：http://jsfiddle.net/zzTSt/1/