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

Question

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

Floatation

#11295721 did you look at this? – Inconformity

yea, but it did not workout. – Floatation

Answer 1

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.

Underbelly

Is there any possibility to stop the mouseover event present in a particular js file as i have 4 js files and it is blocking of all the files. I want to block mouseover event only of a single file i.e. raphael.js – Floatation

Answer 2

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.

Josh