jQuery e.clientX returning undefined

Question

I am having issue with accessing the event coordinates of an event using jQuery. My code is below. Whenever I change the volume slider it returns undefined instead of the cursor position.

 $(document).ready(function(){
       // for new browsers
    $("input#volume").bind('input', function(e){
        if (is_playing()) {
            now_playing.volume = parseFloat((this.value/100));
            //  set the tooltp for the current volume
            var vol_tooltip = Math.floor((this.value/100)*100);
            // $(".seek_timer").remove();
            console.log(e.clientX);
            // $(".slider-wrap").append("<span class='seek_timer'>"+vol_tooltip+"</span>");
            // $(".seek_timer").css("left",e.clientX-15+"px");  
        }
    });
});

Why is e.clientX undefined?

Answer 1

You're binding to the input event, which does not include coordinates - coordinates are only present on events which use the MouseEvent interface, such as click, mousedown and mouseup events. You'll need to redesign your code so as to accomplish your desired functionality using one of these MouseEvent types if you want to be able to capture client position coordinates via the clientX or clientY properties.