Hello.

upd: Solution found. Solution in the answers.

First, some code, then the problem:

HTML:

<div style="background:#ccc" onmouseover="over()"> <a href="#">link</a> <a href="#">another link</a> </div>

Javascript:

 function over() { alert('over'); }

The problem is that the onmouseover event re-fires when you hover on any of the links, even if the mouse pointer was previously in the div boundaries.

The question is how to get around this mechanism. I need the event to be triggered only at the moment when the user hovers the mouse over the div .

The same problem is observed with onmouseout , but it seems to me that their solutions should be similar.

A piece of context for understanding the problem:

There is a cascade menu.

Submenus pops up using JS for the client does not like their instant appearance when implemented through CSS.

The problem is that the process of drawing a submenu is repeated when you hover on its items.

  • only at the moment when the user hovers the div. Well, hang up the event on the div, they themselves gave the answer in the question - Zowie
  • the event hangs on the div -e, but re-fires when you hover over the links in this div -e contained. I don’t work very closely with JS, so I’m probably misunderstanding something. If so, please correct me. - ikoolik
  • I did not read the question when I wrote the comment. In your case, you need to hang handlers directly on the links, and not on the div. The reason for this is simple - the div contains these same links; accordingly, pointing to any child element of div'a raises the MouseOver event for itself. - Zowie
  • @AlexWindHope That's the problem: I need an event on a diva, not on links = (i.e. events on links will not save me. The handler is in the process of writing. I just thought there is a ready-made solution. - ikoolik

4 answers 4

 <div style="background:#ccc" onmouseover="over(event)"> <a href="#">link</a> <a href="#">another link</a> </div> <script> function over(e){ e = e ? e : window.event; e.target = e.target ? e.target : e.srcElement; if(e.target.nodeName.toLowerCase() != 'div') return false; console.log(e.target.nodeName.toLowerCase()); } </script>

Item verification is rather rough. Although the binding event is the same.

  • @ling thanks. already independently wrote the necessary handler. everything works - ikoolik

a schematic decision in case someone has a similar question:

HTML:

 <div style="background:#ccc" id="targeted_div"> <a href="#">link</a> <a href="#">another link</a> </div>

Javascript:

 window.onload = function() { var parent = document.getElementById('targeted_div'); parent.onmouseover = parent.onmouseout = function(e) { e = e || event; if (!isOutside(e, this)) return; if(e.type == 'mouseout') { //действия при выходе } else { //действия при входе } } }

modified code taken from here

    I highly recommend you to use for such samples as you, the expression

     console.log('сообщение в консоль');

    This will remove the problem of unnecessary clicking on the "OK" button of the alert. Moreover, there may be a case when something will get stuck, and you will not get rid of the alert (only by reloading the page). I think you can use the JS console in the browser.
    About your problem. After you replace alert() with console.log('сообщение в консоль'); The problem should disappear. The whole thing, rather, is that after activating the alert and deactivating it, the mouse will somehow come into the view of your diva. From there, and re-triggering the event.

    • console.log () - taxis, yes. Only here the problem is somewhat different as it seemed to me. Although the wording of the question does not give me 100% confidence. - Zowie
    • And, no, you are right, the event is still hung on each internal element. - Anton Mukhin
    • @ Anton Mukhin alert written solely as an example of an action function. The code given in the question is simply a scheme that only a common problem has in common with real code. - ikoolik

    Try to solve this case by setting the position properties of the links to relative. There is another way - to remove the "listener" of events. To do this, use the method

    RemoveEventListener ()

    • @Asen This gave rise to my question. - ikoolik
    • @Asen Already tried to delete events, but since they are paired in the specific task (onmouseover / onmouseout), when the event handler of one event was canceled, a reverse event handler was created automatically. As a consequence - the same mess I did not indicate this in the question of what is to blame. btw problem solved - ikoolik