[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 109
  • Last Modified:

jQuery event handling question

Please look at the sample code:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta charset="UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $(".event").on("mouseenter mouseleave", "div, ul, li", highlight);
                
                function highlight(event) {
console.log($(event.target).prop("tagName"));
                    $(this).toggleClass("highlightEvent");
                }
            });
        </script>
        <style>
            div {
                height: 100px;
            }
            .highlightEvent {
                background-color: cornsilk;
            }
            .highlightEvent .eventDate {
                font-weight: bold;
                text-decoration: underline;
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="event">
            <ul><li class="eventDate">January 1, 2015</li></ul>
        </div>
        <div class="event">
            <ul><li class="eventDate">January 2, 2015</li></ul>
        </div>
        <div class="event">
            <ul><li class="eventDate">January 3, 2015</li></ul>
        </div>
        <div class="event">
            <ul><li class="eventDate">January 4, 2015</li></ul>
        </div>
    </body>
</html>

Open in new window


I am having two problems with this.

1) Can someone tell me why the event is firing twice when I mouse in, and twice more when I mouse out?

2) My object is to make the <div>'s background turn to yellow when I hover over it. But what's happening is I'm getting the <li> instead, and it's changing only the <li>'s background to yellow. How can I set this up so that any mouse movement inside the <div> will return me a reference to the <div> and not any of its children (i.e., without using parent())?
0
elepil
Asked:
elepil
1 Solution
 
Rainer JeschorCommented:
Hi,
not exact sure why, but you attached the event to all childs, perhaps that.
I did some rebuild on your script as there are two nice jQuery functions inside, which makes your objective quite nice:
$(function() {
                $("div.event").mouseenter(function() {
                    //alert("Enter");
                    $(this).toggleClass("highlightEvent");
                }).mouseleave(function() {
                    //alert("Left");
                    $(this).toggleClass("highlightEvent");
                });
            });

Open in new window

Sample:
http://jsfiddle.net/EE_RainerJ/60hxq6hq/

HTH
Rainer
0
 
elepilAuthor Commented:
Thanks for the help!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now