イベントリスナー/ .getElementById Braveブラウザでの問題

今日Braveを使用し始めましたが、私のWebアプリケーション/ Webサイトの一部が動作していないことに気付きました。特に、一部のボタンは処理されません。そこで、トラブルシューティングのために、this.idを記録するためのウィンドウクリックハンドラを備えたIIFEを追加しました。 Braveコンソールにはundefinedと書かれていますが、htmlボタンの要素にはid属性が明確に定義されていますか？私は何かを逃していますか、またはまだ完全には焼かれていませんか？イベントリスナー/ .getElementById Braveブラウザでの問題

(function() { 
 
    console.log('IIFE Fired.'); 
 
    window.addEventListener("click", clickHandler); 
 
    
 
    function clickHandler() { 
 
     console.log(this.id); 
 
    } 
 
}());

<head> 
 
    <link href='//fonts.googleapis.com/css?family=Roboto:400,700,100,300,700italic,500,500italic,400italic,300italic,100italic|Roboto+Condensed:300' rel='stylesheet' type='text/css'> 
 
    <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> 
 
    <link rel="stylesheet" href="//code.getmdl.io/1.3.0/material.grey-deep_orange.min.css" /> 
 
</head> 
 

 
<body> 
 
    <button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="credential-save"> 
 
    Save 
 
    </button> 
 

 
    <script src="//code.getmdl.io/1.2.1/material.min.js"></script> 
 
</body>

(function() { 
    console.log('IIFE Fired.'); 
    window.addEventListener("click", clickHandler); 

    function clickHandler() { 
     console.log(this.id); 
    } 
}());

出典

2017-01-07 Ron Royston

をJSは私の問題を考え出しました。それはBrave Browserとは関係ありませんでした。私は、テスターの 'div 'にコピー/ペーストし、いくつかのボタンの' id'プロパティを変更するのを忘れてしまった。それは効果的に私のイベントリスナーに適切なボタンを邪魔しました。だから、...悪い。 –

これは完全に期待されています。イベントリスナーでは、thisが現在のイベントターゲットです。つまり、イベントリスナーを追加したノードです。この場合は、windowです。また、idはありません。

window.addEventListener("click", function() { 
 
    console.log(this === window); // true 
 
});

<button>Save</button>

あなたはどちらかのイベントを委任し、ボタンにイベントリスナーを追加したり、イベントターゲットを使用しないでください。

window.addEventListener("click", function(e) { 
 
    console.log(e.target.id); 
 
});

<button id="credential-save">Save</button>

出典

2017-01-07 02:37:09 Oriol

さて、私はこのテストがブラウザ間で同じ結果を返すのを見ましたか？...だから、イベントリスナーをページ全体に付け加え、次にthis.idに基づいて処理する最良の方法は何ですか？私は以前これをやったことがあるが、コピー/ペーストする古いコードを見つけることができない。 –

ああ、そうです。ありがとう。 –

あなたは、ウィンドウにイベントリスナーが割り当てられています。私はそれがボタンに割り当てられると、そのIDはログになると思う。これはあなたのHTMLです。

<button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="credential-save"> 
Save 
</button>

そして、これが

(function() { 
    console.log('IIFE Fired.'); 
    var button = document.querySelector('button'); 
    button.addEventListener("click", clickHandler); 

    function clickHandler() { 
    console.log(this.id); 
    } 
}());

出典

2017-01-07 02:40:59

右。それは私がそれを持っていた方法です。しかし、私はリスナーが失敗した理由は、CSSの 'display：none'がページロードの' div'にあることを考えていました。つまり、私はブリンド 'div'が入っているのでリスナーを付けなくてもいいと思っていましたビュー。したがって、全体のウィンドウハンドラ。並べ替えのようなjQueryの。 –

イベントリスナー/ .getElementById Braveブラウザでの問題

答えて

関連する問題