2009/07/30

Recent entries from same category

  1. xtag と angular1 を足して2で割った感じに使える薄い JavaScript ライブラリ「sj.js」
  2. Web Component を簡単に作れる JavaScript ライブラリ「X-Tag」
  3. twitter.bat
  4. jQueryプラグインとして動作するGithub Badge作ってみた。
  5. XSLとjQuery/HTMLだけで作る、amazon最速検索

こまったねー。
例えば、divにclickとdblclickを両方割り当てた場合、「トンッ、トントン!」とクリックとダブルクリックを発生させた場合
  • Firefox/Google Chromeだと「トントン」で2クリックが発生
  • IEだと「トントン」では1クリックしか発生しない
なんて動きになってる。以下検証に使ったコード。
<html>
<head>
<script type="text/javascript">
(function() {
  var reg = function(e, t, f) {
    if (window.attachEvent)
      e.attachEvent('on'+t, f);
    else
      e.addEventListener(t, f, false);
  };

  reg(window, 'load', function(e) {
    var c1 = 0, c2 = 0;
    var panel = document.getElementById('click-panel');

    var updateStatus = function() {
      panel.innerHTML = "click:" + c1 + " dblclick:" + c2;
    };

    reg(panel, 'click', function() { c1++; updateStatus() });
    reg(panel, 'dblclick', function() { c2++; updateStatus() });
    reg(panel, 'mouseout', function() { c1 = c2 = 0; updateStatus() });
    updateStatus();
  });
})();
</script>
</head>
<body>
<div id="click-panel" style="background: blue; width: 600; height: 300"></div>
<body>
</html>
例えば、図を描きたい場合にクリックで多角形を描き、ダブルクリックで完了なんてユーザインタフェースは良くある話。
上の例で言えば
  • Firefox/Google Chromeは「click:3 dblclick:1」
  • IEだとは「click:2 dblclick:1」
なにそれ。前回クリックした時の(new Date).getTime()覚えておいて一定間隔以上でクリック発生...なんてコード、簡単だけど書きたくないよ。(ノД`)ウワーン

blog comments powered by Disqus