1

私のアプリケーションでは、いくつかの新しい要素を作成し、ユーザーの操作に従ってそれらをページに追加します。

var dv=document.createElement('div');
//set styles for the dv
.....

この div 要素を作成した後、いくつかのイベントを追加します。

MyLib.Event.addDomListener(dv,'click',function(e){
    console.info('click');
});
MyLib.Event.addDomListener(dv,'mousedown',function(e){
    console.info('mousedown');
});

これは、ページで生成された結果です (div には img タグと span タグが含まれます)。

ここに画像の説明を入力

ページがロードされた後、問題が発生します。

画像を直接クリックすると、clickイベントはトリガーされませんが、mousedownイベントはトリガーされます。

画像なしで div を直接クリックすると、すべてうまくいきます。

画像をクリックすると、clickイベントがdivに委任されないようです。

しかし、Chrome 開発ツールを使用して最終的に生成されたコードをコピーすると、次のようになります。

<div id="con" style="position: absolute; border:1px solid red; left: 10px; top: 10px; width: 20px; height: 34px; ">
        <img src="http://localhost/MAPALINE/IMAGES/MARKER_LARGE.PNG" id="ov" style="left: 0px; top: 0px; position: relative; width: 20px; height: 34px; ">
        <span style="text-align: center; left: 0px; top: 0px; width: 20px; position: absolute; ">1</span>
</div>

次に、それを新しい .html ファイルにコピーし、イベント スクリプトを追加します。

<script type="text/javascript">
    var con=document.getElementById('con');
    con.addEventListener('click',function(e){
        console.info('click');
    },false);
    con.addEventListener('mousedown',function(e){
        console.info('mousedown');
    },false);
</script>

これで、div 内のどこをクリックしても、2 つのイベントの両方が発生します。

私は本当に頭がおかしいです、何が問題なのですか？生成されたdivに対して特別なことは何もしません。

それで、あなたの誰かがこの問題に遭遇したかどうか知りたいですか？または、どのような場合にこの種の例外が発生する可能性がありますか?

アップデート：

Mylib.Event.addDomListener=function(target,evt,handler){
    if(target.addListener){
        target.addListener(evt,handler,false);
    }else if(target.atttchEvent){
        target.attachEvent('on'+evt,handler);
    }else
        #~ target['on'+evt]=handler;
}

クロスブラウザでの使用のみで、mousedownとにかくイベントがうまく機能することに注意してください。

4

1 に答える 1

0

2 つの例の間にリスナーを接続する 2 つの異なる方法を使用していることに気付きました。

物事を可能な限り厳密に複製して、考えられる原因を特定することが常にベスト プラクティスです。両方のテストでリスナーをアタッチする同じ方法に固執してみてください。これにより、何らかの洞察が得られる可能性があります。

また、「MyLib」が何かわかりませんが、何らかの JS ライブラリである場合、そのライブラリに問題がある可能性があります。ネイティブ JS メソッドまたは別のライブラリを使用してみてください。

于 2012-02-17T07:40:44.573 に答える