CODEWITHSUNDEEP
javascriptjqueryraphaelmouseover
Ashish
Ashish

Reputation: 498

How to disable mouseover event from everywhere using javascript/jquery?

I am using raphael.js library and this file contains a mouseover event which I want to stop working. Can anyone help me?

Upvotes: 5

Views: 23507

Answers (2)

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34199

Actually, you could simply create an overlay which will catch events and prevent bubbling using event.stopPropagation().

As mouseover and mouseout events do not bubble from child to parent element, it becomes even easier - creating an invisible overlay is enough.

Without overlay: 

$("p").mouseover(function() {
    $(this).text("Gotcha!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Mouse over me</p>

With overlay: 

$("p").mouseover(function() {
    $(this).text("Gotcha!");
});
#mouseoverDisabler {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: rgba(255, 0, 0, 0.15); /* just for demo. make it 0.0 */
z-index: 10000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="mouseoverDisabler"></div>

<p>Mouse over me</p>

The background color is red on purpose - it will help you to understand the idea. You can set it to transparent and will not be visible.

Upvotes: 1

Aramil Rey
Aramil Rey

Reputation: 3475

You could use CSS:

.element {
    pointer-events: none;
}

Or something like:

$('.element').on('mouseover mouseenter mouseleave mouseup mousedown', function() {
   return false
});

I don't know from what you want to prevent that event from triggering something, please be more specific on your questions and provide more relevant information.

Upvotes: 9

Related Questions