Geek asks and answers

How can I fire a mouse for a child if the parent also has a mouse pointer?

I have a “help” area on my page, and at any time when a user hovers over a table, help information should be updated. The problem is the table. I have a flag in 1 cell of each row, and when the user hangs over this flag, I want the mouseover event of this flag to override the table event and display this hint. Currently tabular mouse hovering works fine, but nothing happens when I click on the checkbox.

<table class="myTable">
   <tr>
      <th>Col1</th>
      <th>Col2</th>
   </tr>
   <tr>
      <td><input class="myCheckbox" type="checkbox" /></td>
      <td>Cell 2</td>
   </tr>
   <tr>
      <td><input class="myCheckbox" type="checkbox" /></td>
      <td>Cell 3</td>
   </tr>
</table>

<div class="myHelpMenu"></div>


$('.myCheckbox').mouseover(function() {
    $('.myHelpMenu').html("this is my checkbox help");
});

$('.myTable').mouseover(function() {
   $('.myHelpMenu').html("this is my tables help");
});
+5
source share
3 answers

LIVE DEMO

mouseover target , , JS .tagName, .

$('.myTable').mouseover(function( e ) {

  var tag = e.target.tagName;

  var messages = {
    "INPUT" : "this is my checkbox help",
    "TABLE" : "this is my tables help"
  };

  $('.myHelpMenu').text( messages[tag] );

});

, :

$('.myTable').on('mouseover mouseleave',function( e ) {

  var tag = e.target.tagName;

  var messages = {
    "INPUT" : "this is my checkbox help",
    "TABLE" : "this is my tables help"
  };

  $('.myHelpMenu').text( messages[tag] );

  if(e.type=='mouseleave')
    $('.myHelpMenu').empty();

});
+4

, ?

, .

$('.myCheckbox').mouseover(function(e) {
    $('.myHelpMenu').html("this is my checkbox help");
    e.stopPropagation();
});
+3

Since the mouseovertable applies to the entire area, just call mouseenter. You can then add mouseoutto refill after they leave the table.

0
source

More articles:


All Articles