点击锚点应该执行JavaScript而不是跳转到新页面。

Question

我有一个 HTML 锚点，当点击它时应该让一个 div 向上或向下滑动（我调用了 JQuery 的 .slideToggle(); 函数）; 我的问题: 当我点击链接时，它不执行代码，而是跳转到一个新页面，在该页面的 URL 中是 JavaScript 代码，例如："javascript: $('#attachFileContainer').slideToggle();"，而页面（body）的内容只是 "[object Object]"。

我的代码：

<a class="interactiveLink" 
     href="javascript: $('#attachFileContainer').slideToggle();">Attach File</a>

出了什么问题，我之前有很多锚点元素，从href属性中调用javascript，从来没有发生过这种情况吗？

- sazr

---

当您不需要一个A元素时，请不要使用A元素。使用更合适的元素，如按钮或样式化的span。 - RobG

Answer 1

你希望这个：

<a class="interactiveLink" onclick="$('#attachFileContainer').slideToggle(); return false;" href="#">Attach File</a>

return false 阻止链接在运行 onclick 代码后执行任何操作。

- Trott

Answer 2

不要编写内联JavaScript代码，尝试使用以下方法。preventDefault方法可以防止元素的默认操作。在您的情况下，它会阻止点击事件的默认操作，即跳转到新页面。

$(".interactiveLink").on("click", function(e){
   e.preventDefault();
   $('#attachFileContainer').slideToggle();
});

使您的HTML代码为：

<a class="interactiveLink" href="##">Attach File</a>

- DG3

Answer 3

我看到很多答案都涉及解决方法，但没有一个能够击中问题的核心。你所做的事情背后的原因是不起作用的，以及为什么它经常起作用。

你正在使用javascript:XXX作为href属性的值，即锚标签的超文本源链接属性。其中XXX是一些JavaScript代码，一个表达式，比如函数调用。

当使用这种表示法时，XXX代码首先被评估。如果表达式产生一个值，那么大多数浏览器将清除页面并仅显示结果值。

例如，

<a href="javascript:1+1">点击这里！</a>将导致2被显示。

同样，这可以通过一个函数重写来产生相同的结果：

function addTwo() {
    return 1+1; 
}

<a href="javascript:addTwo()">点击这里！</a>（期望输出2）

对于大多数浏览器，如果评估XXX代码并且没有结果值，则它将不显示任何内容--因此，它将停留在同一页上。因此，有几种方法可以实现此行为。

• 我们可以将结果分配给一个变量。

<a href="javascript:var two = addTwo()">点击这里！</a>

在赋值期间没有剩余的结果。

• 我们可以包装另一个不返回任何内容的函数来围绕此函数。

A.

function addTwo2() {
    addTwo();
}
<a href="javascript:addTwo2()">Click Here!</a>

B. 相同的事情，但都是内联的：

<a href="javascript:(function() { addTwo();})()">点击这里！</a>

C. 相同的事情，但使用你经常看到的 ! 习惯用语。（相同的逻辑意义，只是使用非运算符来实现更少的字符）：

<a href="javascript:!function() { addTwo();}()">点击这里！</a>

• 在大多数函数式编程语言中，我们可以使用所谓的钩子来代替：

  function addTwo() {     
      alert( "sfsf" );
      return 1+1; 
  }
  
  var x = addTwo;
  
  addTwo = function() {
      x();    
  }
  

  <a href="javascript:addTwo();">点击这里！</a>

• 最后，如果您的函数或表达式不需要返回任何内容，请在该函数中省略。

总的来说：

当你使用javascript: href链接时，点击后会先执行javascript:后面的javascript代码，如果它有返回值，浏览器将仅显示该结果，否则浏览器将停留在当前页面上，因为它没有任何可显示的值。

- user17753

Answer 4

解决方案1：

HTML：

<a href="#">Click me</a>

jQuery：

$(function(){
    $("a").click(function(event){
        event.preventDefault();
    }); 
});

---

解决方案2： HTML：

<a href="#.">Click me</a>

---

解决方案3：

HTML：

<a href="javascript:void(0);">Click me</a>

---

解决方案4：

HTML：

<a href="#">Click me</a>

jQuery：

$(function(){
    $("a").click(function(event){
        return false;
    }); 
});

---

解决方案5：

HTML：

<a href="javascript://">Click me</a>

- Muhammad Hassaan

Answer 5

一个带有href属性的A元素是一个链接，而不是锚点（锚点是带有name属性的A元素，是链接的目标）。

由于该元素既不用作链接也不用作目标，您不应该使用A元素，而应该使用按钮或样式化的span元素。这样你就不必担心链接的默认行为了。

<button class="interactiveLink" onclick="
  $('#attachFileContainer').slideToggle();
">Attach File</button>

或者

<span class="interactiveLink button" onclick="
  $('#attachFileContainer').slideToggle();
">Attach File</span>

- RobG

---

通常习惯将 <a> 元素称为 锚点 元素，无论它是用于定义 _超链接_、超链接的 命名目标位置 或两者兼而有之。 - user17753

仅仅因为错误命名链接很普遍，这并不意味着我必须加入他们。 :-) 这是一个技术论坛，应使用技术上正确的术语。 - RobG

即使是w3技术文档，也不会同意你的说法。因为链接有两个锚点：源和目标。在这两种情况下，它们都被称为锚点。所有<a>元素都被称为锚点。 - user17753