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();
}

e.preventDefault（）;在Firefox中不起作用

1 个答案: