Javascript：requestAnimationFrame使用時のクリックイベントの問題

突然面白い問題に遭遇しました。 簡単に言えば、その本質は次のように説明できます。 requestAnimationFrameを使用して、次のようにテキストの色を動的に変更するとします。

function render() { element.innerHTML = "<font color='#555'>some text</font>"; requestAnimationFrame(render); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要素（またはドキュメント全体）でonclickイベントハンドラーをハングさせ、テキストをクリックすると、...何も起こりません。



詳細



したがって、divを作成します。

 <div id="main"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

全画面に拡大します。

 #main { width: 100%; height: 100%; position: absolute; cursor: default; background-color: #CCC; font-size: 30vh; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今のコード：

 function render() { document.getElementById("main").innerHTML = "<font color='#555'>click here</font>"; requestAnimationFrame(render); } document.body.addEventListener("click", function(e) { console.log("click"); }); render();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでコードを試すことができます 。



結果は次のとおりです。

• テキストをクリックしても何も起こらず、イベントは発生しません
• メインイベントのその他の部分をクリックすると、コンソールに「クリック」と表示されます

追加のポイント：

• フォントを削除し、テキストだけを残すと、クリックが発生します
• フォントをスパンに置き換えても、クリックは発生しません
• 行requestAnimationFrame（render）をコメント化すると、クリックが発生します
• mousemoveなどの他のイベントは、テキストの上とテキストなしの両方で、必要に応じて発生します

なぜこれが必要なのですか？



質問はトピックに完全に関連しているわけではありませんが、それにもかかわらず、なぜこのようなコードが必要なのか、どのような実用的なアプリケーションですか？



回答：これをオリンピックのパズルと考えてください。 ランダムな文字で塗りつぶされたページを作成するとします。それぞれの文字はランダムに色が変わります。 シンボルをクリックすると、コンソールに表示されます。



次のような現在の色の文字を返すgetTextメソッドを持つ文字クラスを作成します。

 // some code symbol.prototype.getText = function() { return "<font color='" + this._color + "'>" + this._text + "</font>"; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、requestAnimationFrameで、色の再カウントとすべての文字の出力を画面に順番に挿入します。



処理の「クリック」を追加します。



解決策



最初に思いついたのは、「額」の解決策でした。 別のdivを追加します。

 <div id="click"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メインと同じサイズですが、透明で大きなZインデックスがあります：

 #click { width: 100%; height: 100%; position: absolute; cursor: default; opasity: 0; z-index: 100; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、テキストをクリックすると、外側で問題なく機能します。



他のオプションの中で、以下だけが思い浮かびます。 事前に各文字に一意のインデックスを持つspan要素を追加し、requestAnimationFrameでdocument.getElementById（ "span_id"）を介して色を変更するだけです。 このオプションは面倒すぎるように思えます。



あとがき



このクリック動作の具体的な理由は何なのか理解できませんでした。 これが何であるかを理解している人がいるなら、知恵を共有してください。 ありがとうございます！



更新する



Zibxがコメントで指摘したように、クリックイベントが発生するには、同じ要素でmousedownイベントとmouseupイベントが発生する必要があります。 この場合、innerHTMLは常に更新されているため、これは発生しません。