Help us understand the problem. What is going on with this article?

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

More than 5 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);

resistance_gowy
フロントエンド。 https://github.com/underground0930/ https://twitter.com/resistance_gowy http://resistance-underground.hateblo.jp/
https://htmlgo.site/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away