例えば、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」
