search
LoginSignup
4

More than 5 years have passed since last update.

posted at

updated at

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

案件で以下のような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
What you can do with signing up
4