How do I check if the mouse is over an element in jQuery?

前端 未结 24 2638
不思量自难忘°
不思量自难忘° 2020-11-22 08:10

Is there a quick & easy way to do this in jQuery that I\'m missing?

I don\'t want to use the mouseover event because I\'m already using it for something else. I

24条回答
  •  生来不讨喜
    2020-11-22 09:11

    Here is a function which helps you check if the mouse is inside an element or not. The only thing you should do is to call the function where you can have a live mouse-associated EventObject. something like this:

    $("body").mousemove(function(event){
         element_mouse_is_inside($("#mycontainer", event, true, {});
    });
    

    You can see the source code here in github or at the bottom of the post:

    https://github.com/mostafatalebi/ElementsLocator/blob/master/elements_locator.jquery.js

    function element_mouse_is_inside  (elementToBeChecked, mouseEvent, with_margin, offset_object)
    {
        if(!with_margin)
        {
            with_margin = false;
        }
        if(typeof offset_object !== 'object')
        {
            offset_object = {};
        }
        var elm_offset = elementToBeChecked.offset();
        var element_width = elementToBeChecked.width();
        element_width += parseInt(elementToBeChecked.css("padding-left").replace("px", ""));
        element_width += parseInt(elementToBeChecked.css("padding-right").replace("px", ""));
        var element_height = elementToBeChecked.height();
        element_height += parseInt(elementToBeChecked.css("padding-top").replace("px", ""));
        element_height += parseInt(elementToBeChecked.css("padding-bottom").replace("px", ""));
        if( with_margin)
        {
            element_width += parseInt(elementToBeChecked.css("margin-left").replace("px", ""));
            element_width += parseInt(elementToBeChecked.css("margin-right").replace("px", ""));
            element_height += parseInt(elementToBeChecked.css("margin-top").replace("px", ""));
            element_height += parseInt(elementToBeChecked.css("margin-bottom").replace("px", ""));
        }
    
        elm_offset.rightBorder = elm_offset.left+element_width;
        elm_offset.bottomBorder = elm_offset.top+element_height;
    
        if(offset_object.hasOwnProperty("top"))
        {
            elm_offset.top += parseInt(offset_object.top);
        }
        if(offset_object.hasOwnProperty("left"))
        {
            elm_offset.left += parseInt(offset_object.left);
        }
        if(offset_object.hasOwnProperty("bottom"))
        {
            elm_offset.bottomBorder += parseInt(offset_object.bottom);
        }
        if(offset_object.hasOwnProperty("right"))
        {
            elm_offset.rightBorder += parseInt(offset_object.right);
        }
        var mouseX = mouseEvent.pageX;
        var mouseY = mouseEvent.pageY;
    
        if(  (mouseX > elm_offset.left && mouseX < elm_offset.rightBorder)
            && (mouseY > elm_offset.top && mouseY < elm_offset.bottomBorder) )
        {
            return true;
        }
        else
        {
            return false;
        }
    }
    

提交回复
热议问题