I have a disabled input with type range. And I want to monitor mouse events over a div containing that disabled input range. Problem is that in some areas (the dark grey area, area on the slider track which value smaller than the slider tip), the div mouse events do not trigger.
Below are the code and Codepen:
<div class="list" style="background-color:yellow" ng-mouseup="mouseup()" ng-mousedown="mousedown()" >
<input type="range" name="slider" min="0" max="100" ng-disabled="true" />
</div>
http://codepen.io/anon/pen/mpoga
Click around the dark grey area on the left of the slider - you will see the event does not trigger. Any advice?
Putting a div overlay solved the problem.
<div style=" opacity:0; position: absolute;left: 0px;top: 0px;width:100%;height:100%;">
But there are another problem, if the mouse up is happened outside the parent div, still the event won't be triggered. Should I have some watch on the mouse up event no matter which element area the pointer is. How can I do it in angularJS? And I may also need to stop watching when there are mouse up and start watching again when there are mouse down. How may I do that?
The disabled input is stopping event propagation. You could draw a div with opacity:0 on top and listen for events there whenever your input is disabled.
EDIT: Here's a fork of your pen: http://codepen.io/anon/pen/svjCo
The important bits are position:relative for the container and the new div with position:absolute which fills it. You don't need to declare any new handlers as clicks propagate from the new div into its parent container with the click handler.
Make sure to add ng-hide or ng-show to the new div so it's only shown if the input is disabled.
Alternative solution would be using a CSS rule to make the disabled input to not capture any mouse events.
input[type="range"]:disabled {
pointer-events: none;
}
Hope this helps.