mouseoverイベントのバブリングの問題 - Javascript

Question

フレックスコンテナに要素を動的に行単位で追加する必要がある純粋なjavascriptを作成しています。私の驚いたことに、私のmouseoverイベントは行を横切って伝播してはいけませんが、他の子をトリガします。以下は私のコードです。

function drawChildren() { 
    var size = Math.floor(containerSize/childSize); 
    var counter = 1; 
    var parent = document.getElementById(parentId); 
    for(var rowCount = 1; rowCount <= size ; rowCount ++) { 
     var row = document.createElement('div'); 
     row.id = `${parentId}-rowDiv-${rowCount} `; 
     row.setAttribute('style', ` 
     height: ${childSize}px; 
     width: ${containerSize}px; 
     display: flex; 
     flex-direction:row; `); 
     for(var child = 1; child <= size ; child ++) { 
     var childDiv = document.createElement('div'); 
     childDiv.id = `${parentId}-childDiv-${counter}`; 
     childDiv.setAttribute('style',` 
      height: ${childSize}px; 
      width: ${childSize}px; 
      background-color: ${getRandomColor()};`); 

     childDiv.addEventListener("mouseover", onMouseOver); 
     childDiv.addEventListener("mouseleave", onMouseLeave); 
     row.appendChild(childDiv); 
     counter ++; 
     } 
     parent.appendChild(row); 
    } 

のonmouseover、iは物体上にマウスオーバーするたびに問題が、それは行を横切って伝播さ

function onMouseOver(e) { 
    e.stopPropagation(); 
    document.getElementById(e.target.id).style.display = 'none'; 
    console.log(e.target.id); 
    } 

以下の関数を呼び出し、同じ上の他のすべての項目のマウスオーバーイベントを発生します行。一度に1つずつ発射します。 js stopPropagation() propを追加して伝播を止めようとしましたが、何も変わりません。これを引き起こしているのはどうですか？私はそれにどのように対処していますか？どんな助けもありがとう。

Answer 1

JSロジックは、sizeとparentIdの変数を取得するための構文を削除した後にうまく動作します（私はJSPから推測しています）。使用されるバックティック（ `）が問題であるかもしれません。

OR

あなたは、行の最初の子の上にホバリング問題に言及しているが、行全体を隠します。

ここではdisplay:none;が原因となり、代わりにvisibility: hidden;を使用できます。

display: none;は、レイアウトから要素を削除し、レイアウトから取り出された領域を解放し、次の要素がその領域を占有できるようにします。 質問では、1番目の子にホバリングすると、2番目の要素が現在使用しているスペースが解放されます。あなたのマウスはまだ同じ位置にあるので、2番目の要素が削除され、サイクルが順調に進みます。

visibility: hidden;は、ページのレイアウト内のスペースを保持しながら要素を非表示にします。

var containerSize = 200, 
 
    childSize = 50; 
 

 
function onMouseOverDisplay(e) { 
 
    e.stopPropagation(); 
 
    document.getElementById(e.target.id).style.display = 'none'; 
 
    console.log(e.target.id); 
 
} 
 

 
function onMouseOverVisibility(e) { 
 
    e.stopPropagation(); 
 
    document.getElementById(e.target.id).style.visibility = 'hidden'; 
 
    console.log(e.target.id); 
 
} 
 

 
function setAttr(elem, attrs) { 
 
    for (var attr in attrs) { 
 
    if (attrs.hasOwnProperty(attr)) { 
 
     elem.setAttribute(attr, attrs[attr]); 
 
    } 
 
    } 
 
} 
 

 
function drawChildren(parentId) { 
 
    var size = Math.floor(containerSize/childSize), 
 
    parent = document.getElementById(parentId), 
 
    counter = 1, 
 
    rowCount, childCount, row, childDiv; 
 

 
    for (rowCount = 1; rowCount <= size; rowCount++) { 
 
    row = document.createElement('div'); 
 
    row.id = parentId + "-rowDiv-" + rowCount; 
 
    row.setAttribute('style', "height: " + childSize + "px; width: " + containerSize + "px; display: flex; flex-direction: row;"); 
 
    for (childCount = 1; childCount <= size; childCount++) { 
 
     childDiv = document.createElement('div'); 
 
     childDiv.id = parentId + "-childDiv-" + rowCount + "-" + childCount; 
 
     childDiv.setAttribute('style', "height: " + childSize + "px; width: " + childSize + "px; background-color: cyan; border: 1px solid red;"); 
 

 
     if (parentId === 'tab-display') { 
 
     childDiv.addEventListener("mouseover", onMouseOverDisplay); 
 
     } else if (parentId === 'tab-visibility') { 
 
     childDiv.addEventListener("mouseover", onMouseOverVisibility); 
 
     } 
 

 
     // childDiv.addEventListener("mouseleave", onMouseLeave); 
 
     row.appendChild(childDiv); 
 
     counter++; 
 
    } 
 
    parent.appendChild(row); 
 
    } 
 
} 
 

 
drawChildren('tab-display'); 
 
drawChildren('tab-visibility');

<h2>Using Display None</h2> 
 
<div id="tab-display"></div> 
 

 
<h2>Using Visibilty Hidden</h2> 
 
<div id="tab-visibility"></div>