Edited at

jsのクリックイベントをインラインと外部ファイルから同じ要素に指定した場会

More than 3 years have passed since last update.

案件で以下のようなHTMLがあった。

aタグ毎にカスタムリンク(解析用)のタグ(onclick)を埋め込まなければならない。

だがこちらでも、aタグにclickイベントを仕込んである。普通に書いたら、後で書いた方で上書きされてしまい、解析用のイベントはなくなってしまうのではないかと。。


index.html

<!DOCTYPE html>

<html lang="jp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="script.js"></script>
</head>
<body>
<a href="http://www.yahoo.co.jp/" target="_blank" id="a" onclick="var param = 'abcde'; analysis(param);">click</a>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="script2.js"></script>
</body>
</html>

script.jsには解析用の関数が定義してある。


script.js

function analysis(a){

alert(a);
}

script2.jsで色々検証してみた

jqueryのバージョンは1.11.1

[jquery click]  abcde => jquery => ページ遷移 (OK)


script2.js

$(function(){

$("a").click(function(e){
alert("jquery");
});
});
//

[jquery on]  abcde => jquery => ページ遷移 (OK)


script2.js

$(function(){

$("a").on("click",function(e){
alert("jquery");
});
});


[js onclick]  js => ページ遷移 (駄目)


script2.js

var a = document.getElementById("a");

a.onclick = function(){
alert("js");
//
}

[js addEventListener]  abcde => js => ページ遷移 (OK)


script2.js

var a = document.getElementById("a");

function js(e){
alert("js");
}
a.addEventListener("click", js, false);