title: how to stop event propagation inside <table>?
body: <p>I have mouseover and mouseout events attached to . The problem is these events are triggered when mouse hovers over  and  elements inside  even when I assign d3.event.stopPropagation and pointer-events.. </p>
  
  <p>What am I doing wrong?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  div.divContainer{
      margin: 10em;
      background-color: darkorange;
      padding: 1em;
  }
  table{
  background: steelblue;
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="divContainer"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
  
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                      &lt;td&gt;
                      Name
                      &lt;/td&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                      &lt;td&gt;
                      Name
                      &lt;/td&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                      &lt;td&gt;
                      Name
                      &lt;/td&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                      &lt;td&gt;
                      Name
                      &lt;/td&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                      &lt;td&gt;
                      Name
                      &lt;/td&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
                      &lt;td&gt;
                          Name
                      &lt;/td&gt;
              &lt;/tr&gt;
  
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;    
  
  
  d3.select('table').on('mouseover',efunc1)
  
  function efunc1(){
      alert("adf")
  }
  
  d3.select('table').on('mouseout',efunc)
  
  function efunc(){
      alert("mouseout")
  }
  
  
  d3.select("tr").attr("pointer-events", "none")
  d3.select("td").attr("pointer-events", "none")
  // d3.select('table').on('mouseover',function(){d3.event.stopPropagation();})
  d3.select('tr').on('mouseover',function(){d3.event.stopPropagation();})
  // d3.select('td').on('mouseover',function(){alert("inside td")})
  
  
  // d3.select('table').on('mouseout',function(){d3.event.stopPropagation();})
  d3.select('tr').on('mouseout',function(){d3.event.stopPropagation();})
  // d3.select('td').on('mouseout',function(){d3.event.stopPropagation();})
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>