onclickイベントはIEでは2回、FFまたはChromeでは2回トリガーされません。

divおよびonclickイベントは、ラベルとスパンをラップします。 IEでは、ラベルがクリックされるとイベントが2回トリガーされ、スパンがクリックされるとイベントが1回トリガーされます。これは他のブラウザでは起こりません。onclickイベントはIEでは2回、FFまたはChromeでは2回トリガーされません。

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <script type="application/javascript"> 
     function showHide(id) { 
     var node = document.getElementById(id); 
     if (node.style.display != "none") 
      node.style.display = 'none'; 
     else 
      node.style.display = 'block'; 
     } 
    </script> 
</head> 
<body> 
    <div onclick="showHide('expandDiv')"> 
     <label id="outLabel" for="outText">Label</label> 
     <span id="outText">This is an example of an</span> 
    </div> 
    <div id="expandDiv" style="display:block"> 
     <p>Expanded Div</p> 
    </div> 
</body> 
</html>

出典

2016-05-07 John

はあなたを入れてみてください中括弧で囲まれた状態 – winresh24

これで問題は解決されませんでした。 – John

スパンのラベルがあるのはなぜですか？ – nnnnnn

で期待どおりevent.preventDefault();作品を追加：ここではサンプルコードです。

HTML

<div onclick="showHide('expandDiv', event)">

function showHide(id, event) { 
    var node   = document.getElementById(id), 
     curr_display = node.style.display; 

    node.style.display = curr_display === "block" ? "none" : "block"; 
    event.preventDefault(); 
}

デモ

https://jsfiddle.net/1w4dxdkm/

出典

2016-05-07 01:49:48

私はまた、引数としてイベントを渡すことなくそれを行うことができることも発見しました。 IEで何が起こるかは、event.preventDefault（）;それはグローバルなwindow.event変数に影響を与え、再び発火しないようにします。これは、イベントを変更できるようにするには、引数としてイベントを渡す必要があるため、他のブラウザには影響しません。まだラベルが影響を受けているがスパンではない理由を説明していません... – John

ここで少し短いバージョンのIEとChrome

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <script type="application/javascript"> 
     function showHide(id) { 
     event.preventDefault(); 
     var node = document.getElementById(id); 
     if (node.style.display != "none"){ 
      node.style.display = 'none'; 
     }else{ 
      node.style.display = 'block'; 
      } 
     } 
    </script> 
</head> 
<body> 
    <div onclick="showHide('expandDiv')"> 
     <label id="outLabel" for="outText">Label</label> 
     <span id="outText">This is an example of an</span> 
    </div> 
    <div id="expandDiv" style="display:block"> 
     <p>Expanded Div</p> 
    </div> 
</body> 
</html>

出典

2016-05-07 01:41:54

まず 'event'を定義する必要はありませんか？ – Jaketr00

私たちはhttp://stackoverflow.com/a/6426581/698727を定義する必要はありません。 –

'event'を適切に定義しない限り、Firefoxでは動作しません。 – nnnnnn

onclickイベントはIEでは2回、FFまたはChromeでは2回トリガーされません。

答えて

関連する問題