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> 

с соответствующим JavaScript с использованием Jquery:

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;, который не отображает ошибки, но все же приносит страницу вверху. И я не знаю, как избежать использования встроенного Javascript в моем HTML, поскольку я использую 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(); 
}