案件で以下のような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);