Лучший способ вызова функции JavaScript через HREF атрибута

Question

У меня есть следующий код:

<a href="javascript: doSomeFunction();">Click here</a> 

в Chrome он работает хорошо, но в других браузерах, как Opera, Firefox и т.д., он ничего не делает и открывается почти пустая страница, с сообщением "Object object" или что-то подобное.

Если изменить HREF вызов выше по

<a href="#" onClick="doSomeFunction();">Click here</a> 

он хорошо работает во всех браузерах, но страница перемещается к верхней части (полосы прокрутки).

Третье решение:

<a href="javascript:void(0);" onClick="doSomeFunction();">Click here</a> 

отлично работает для всех браузеров.

Тем не менее, в дикой природе я нашел эту рекомендацию:

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

, которая аналогична описанной выше, но без необходимости события OnClick.

Почему лучший подход и почему?

Answer 1

Общий консенсус в том, что использование href = "#" лучше, чем "javascript: void (0);" поскольку «javascript:» не деградирует изящно, поэтому их следует избегать, когда это возможно.

Лучшим решением было бы ваше второе решение:
<a href="#" onClick="doSomeFunction();">Click here</a>

Чтобы решить проблему с его прокрутки сверху на кнопки, просто изменить его на:
<a href="#" onClick="doSomeFunction(event);">Click here</a> (добавлен аргумент события) и сделать событие. preventDefault(); в вашей функции.

Так что код будет выглядеть следующим образом:

<a href="#" onClick="doSomeFunction(event);">Click here</a> 

<script> 
function doSomeFunction(event){ 
    // Do stuff 

    event.preventDefault(); 
} 
</script>