javascript - e.preventDefault();无法在 Firefox 中工作

Question

我有一个使用 Handlebars.js 的链接图像，其标记如下:

<a href="#" class="clicker" onclick="toggle_visibility('details-{{@index}}');change_icon('img-{{@index}}');">
  <img class="reveal" id="img-{{@index}}" src="img/list-icon.svg" alt="reveal" />
</a>

使用 Jquery 对应的 JavaScript:

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if ( $(e).is( ":hidden" ) ) {
    $(e).slideDown( "fast" );
  } else {
    $(e).slideUp( "fast" );
  }
  e.preventDefault();
}

function change_icon(id)  {
  var e = document.getElementById(id);
  var src = $(e).attr('src');
  if ( src == "img/list-icon.svg" ) {
    $(e).attr('src',"img/x-icon.svg");
  } else {
    $(e).attr('src',"img/list-icon.svg");
  }
  e.preventDefault();
}

这在 Chrome 和 Safari 中完美运行，但在 Firefox 中，尽管这两个函数执行了它们应该执行的操作，但单击时屏幕会跳转到页面顶部，并且出现以下错误:

TypeError: e.preventDefault is not a function

我还尝试了 return false; ，它没有显示错误，但仍然将页面带到顶部。而且我不知道如何避免在 HTML 中使用内联 Javascript，因为我使用的是 Handlebars。

如何解决这个错误？

Answer 1

您正在使用该元素作为事件对象。如果您想使用内联事件处理程序，您可以将事件作为参数传递:

<a href="#" class="clicker" onclick="toggle_visibility(event, 'details-{{@index}}');change_icon(event, 'img-{{@index}}');">
  <img class="reveal" id="img-{{@index}}" src="img/list-icon.svg" alt="reveal" />
</a>

function toggle_visibility(e, id) {
  e = e || window.event; // Cross browser support
  var elem = document.getElementById(id);
  if ( $(elem).is( ":hidden" ) ) {
    $(elem).slideDown( "fast" );
  } else {
    $(elem).slideUp( "fast" );
  }
  e.preventDefault();
}

function change_icon(e, id)  {
  e = e || window.event; // Cross browser support
  var elem = document.getElementById(id);
  var src = $(elem).attr('src');
  if ( src == "img/list-icon.svg" ) {
    $(elem).attr('src',"img/x-icon.svg");
  } else {
    $(elem).attr('src',"img/list-icon.svg");
  }
  e.preventDefault();
}