javascript - 两个div不能处理鼠标事件(Two divs in one don’t handle mouse events)

Question

A have a div_main , then I put one div_child1 inside first div_main - child div handles mouse event;

(A有一个div_main ，然后我在第一个div_child1放入一个div_main子div处理鼠标事件；)

after, I put the second div_child2 into div_main , and neither become handling mouse event, ie not div_child1 not div_child2 doesn't react to mouse click or mouse move event.

(之后，我将第二个div_child2放入div_main ，并且都没有处理鼠标事件，即不是div_child1 not div_child2对鼠标单击或鼠标移动事件没有反应。)

What to do?

(该怎么办？)

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

then in js code I execute the next operations(don't know how to say it properly in case of js :) ):

(然后在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");
}

button class

(按钮类)

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];

mousemove listener

(鼠标移动监听器)

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))";
      }
    }

}

I've added onlick attribute to menu, click on button and menu's onlick works.

(我已经将onlick属性添加到菜单，单击按钮，然后菜单的onlick起作用。)

Seems like child elements are TRANSPARENT for mouse events.

(好像子元素是鼠标事件的TRANSPARENT。)

Any ideas?

(有任何想法吗？)

  ask by Artur translate from so

Answer 1

Here's a simple way to use querySelectorAll to add mouse events to your new <div> s.

(这是使用querySelectorAll将鼠标事件添加到新的<div>的一种简单方法。)

If you will be adding and removing nodes with events, you should consider using 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>