a href - как выполнить javascript и перейти к разделу?

Question

Можно ли сделать <a href="">, чтобы сделать 2 вещи? Один - javascript:, а другой - для перехода к разделу в документах с использованием <a id=""> и знака #.

Короче я ищу что-то вроде этого:

<a href="javascript:someFunction('params');#paragraphSectionId">Link</a> 

Answer 1

Да, использовать onclick свойство:

<a href="#paragraphSectionId" onclick="someFunction('params');">Link</a> 

Answer 2

Конечно, вы можете сделать это:

<a href="#paragraphSectionId" onclick="someFunction('params')">Link</a> 

Answer 3

I 'd предложить использовать ненавязчивый JavaScript, перемещая обработку событий от вашего HTML:

function doSomething(){ 
    console.log("You clicked on the " + this.tagName.toLowerCase() + " element."); 
} 

var link = document.getElementById('aElementID'); 
link.onclick = doSomething; 

JS Fiddle demo.

Это, однако, требует id на a элемент:

<a href="#paragraphSectionId" id="aElementID">Go to the paragraph</a> 

Вы можете, однако, использовать имя-класса, а, хотя это предполагает связывание функциональность нескольких элементов, с for петли (или похожие); учитывая a элементы, имеющие форму:

<a href="#paragraphSectionIdOne" class="linkClassName">Go to the paragraph</a> 
<a href="#paragraphSectionIdTwo" class="linkClassName">Go to the other paragraph</a> 

JavaScript стал бы:

function doSomething(){ 
    console.log("You clicked on the " + this.tagName.toLowerCase() + " element."); 
} 

var links = document.getElementsByClassName('linkClassName'); 
for (var i = 0, len = links.length; i < len; i++){ 
    links[i].onclick = doSomething; 
} 

JS Fiddle demo.

Вы даже можете привязать обработку событий к элементу-предшественнику и основывать ответ, по которому элемент получил событие; это позволило бы HTML формы:

<div id="arbitraryAncestorElement"> 
    <a href="#one">Go to One</a> 
    <ul> 
     <li><a href="#two">Go to Two</a></li> 
     <li><a href="#three">Go to Three</a></li> 
    </ul> 
</div> 

С JavaScript:

function doSomething(event){ 
    if (event.target.tagName.toLowerCase() === 'a') { 
     console.log("You clicked on an 'a' element."); 
    } 
} 

var ancestor = document.getElementById('arbitraryAncestorElement'); 
ancestor.onclick = doSomething; 

JS Fiddle demo.