javascript - 两个 div 合二为一不处理鼠标事件

Question

A 有一个 div_main，然后我在第一个 div_main 中放了一个 div_child1 - 子 div 处理鼠标事件；之后，我将第二个 div_child2 放入 div_main 中，并且都没有处理鼠标事件，即不是 div_child1 不是 div_child2不响应鼠标点击或鼠标移动事件。怎么办？

<div id="menu" style="position:absolute;lef:0;top:60%;width:100%;height:40%;background: white;overflow-x:hidden"></div>

然后在 js 代码中我执行下一个操作(在 js 的情况下不知道如何正确说它 :) ):

document.getElementById("menu").innerHTML+='<div id="cntr-global" style="position:absolute;left:0px;top:0px;width:200%; overflow:hidden;height:100%;>'
document.getElementById("cntr-global").innerHTML+='<div id="cntr-main" style="position:absolute;left:0px;top:0px;width:50%; overflow:hidden;height:100%;>'
document.getElementById("cntr-global").innerHTML+='<div id="cntr-all" style="position:absolute;left:100%;top:0px;width:50%; overflow:hidden;height:100%;>'

for(;b_cnt<10;b_cnt++)
{
var sw=70;
btn[b_cnt]=new button("rgb(255,255,255)",b_cnt, choose_article,document.getElementById("cntr-main"),"2%",10+sw*b_cnt,"96%",sw,"white");
}

按钮类

var button = ES3Class({
constructor: function (color, id, func, parent, x, y, width, height, theme)
{
this.width = width;
this.height = height;

this.color = color;
this.func=func;

this.ph = document.createElement('div');
this.ph.style.position = 'absolute';
this.ph.style.background = color;
this.ph.style.width = width;
this.ph.style.height = height;
this.ph.style.left = x;
this.ph.style.top = y;

parent.appendChild(this.ph);

this.phm = document.createElement('div');
this.phm.style.position = 'absolute';
this.phm.style.background = color;
this.phm.style.width = this.ph.offsetWidth-2;
this.phm.style.height = this.ph.offsetHeight-2;
this.phm.style.left = '1';
this.phm.style.top = '1';

this.ph.appendChild(this.phm);


this.par=parent;
this.theme=theme;

this.x = x;
this.y = y;
this.cx = width;
this.cy = height;

this.ph.onclick=function(){func(id);};
this.koef = 0;
},
SetPos: function (x, y) 
{
this.x = x;
  this.y = y;
  this.ph.style.left = x;
  this.ph.style.top = y;
},
SetBound: function (x, y, cx, cy) 
{
this.x = x;
this.y = y;
this.cx = cx;
 this.cy = cy;
this.ph.style.width = cx;
this.ph.style.height = cy;
this.ph.style.left = x;
this.ph.style.top = y;
},
Text: function (text, id, tcolor, x, y, size, font) 
{
this.t=[0];
this.t[id] = document.createElement('p');
    this.t[id].style.position = 'absolute';
    this.t[id].style.color = tcolor;

    this. t[id].style.left = x;
    this. t[id].style.top = y;
    this. t[id].style.fontFamily=font;
    this. t[id].style.fontSize=size;

    this.phm.appendChild(this. t[id]);
    this. t[id].className="noselect";
    this. t[id].innerText=text;
 },
 Delete: function () 
 {
 this.ph.remove();
 },
 Image: function (src, x, y, width, height) 
 {
    this.im = document.createElement('div');
    this.im.style.position = 'absolute';

    this.im.style.left = x;
    this.im.style.top = y;
   this.im.style.width=width;
   this.im.style.height=height;
    this.im.style.background=src;
    this.im.style.backgroundSize='cover';
    this.phm.appendChild(this.im);
   },
   Ind: function(inde)
  {
 this.ph.style.zIndex=inde;
 }

  });

var btn=[0];

鼠标移动监听器

function move_lis(e) 
{
  var i=0;
    for(;i<b_cnt;i++)
    {
        var el=btn[i];

        var x=e.pageX-el.ph.getBoundingClientRect().left;
        var y=e.pageY-el.ph.getBoundingClientRect().top;

        var kef=el.ph.getBoundingClientRect().width*2;
        if(el.ph.getBoundingClientRect().width>el.ph.getBoundingClientRect().height)
          kef=el.ph.getBoundingClientRect().height*2;

        if(el.theme=="dark")
        {
            el.ph.style.background="radial-gradient(circle "+kef+"px at "+x+"px "+y+"px, white, rgba(10,10,10,255)";
            el.ph.style.background="-ms-radial-gradient( "+x+"px "+y+"px, circle , white , rgba(0,0,0,0))";
        }
      else
      {
        el.ph.style.background="radial-gradient(circle "+kef+"px at "+x+"px "+y+"px, rgb(90,90,90), rgba(240,240,240,255)";
        el.ph.style.background="-ms-radial-gradient( "+x+"px "+y+"px, circle , rgb(60,60,60) , rgba(230,230,230,0))";
      }
    }

}

我给菜单添加了 onlick 属性，点击按钮和菜单的 onlick 工作。似乎子元素对于鼠标事件是透明的。

有什么想法吗？

Answer 1

这是使用 querySelectorAll 的简单方法将鼠标事件添加到您的新 <div>

如果您要添加和删除带有事件的节点，您应该考虑使用 event delegation .

document.getElementById('main').innerHTML+='<div id="div_child1">Child 1</div>';
document.getElementById('main').innerHTML+='<div id="div_child2">Child 2</div>';

for (let div of document.querySelectorAll('#main > div')) {
  div.addEventListener('click', handleMouse);
}

function handleMouse () {
  console.log(this);
}

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