LoginSignup
4

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-11-09

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4