Cjuislider Bind Keydown And Mousedown Issues

Basically exactly as the title mentions.

Here is the issue step by step: (I have 2 events 1 nested in the other. keydown and mousedown)

Solutions found further down the post.

  1. SOLVED - [s]Left clicking on the slider moved the nearest ui-slider-handle to the position of the mouse when clicked.

    (I know this is default, I want to shut this off but keep the click and move functionality)[/s]

  2. SOLVED - [s]After I run the set of events, I can no longer click the ui-slider-handle and move it.

(Happens after the sliders html is rebuilt with the new values added in)[/s]

  1. SOLVED - [s]I can keep left clicking and performing the functionality. I don’t want this once the key combo isn’t met

    anymore.[/s]

Here is the code snippet of my events.




    var repeatControl = true; 

    $('#slider').bind('keydown', function(keyboard) { 

        $(this).bind('mousedown', function(mouse) {

            if (repeatControl && keyboard.which == 17 && mouse.which == 1) { // Ctrl + L-Click

                    // Rebuild the slider handles

                    var newValue = 55;

                    var values = new Array(0,19,22,33,44, newValue);

                    var tabs = '';

                    count = 0;

                    var leftPercent = 0;

                    $.each(values, function (index, value) {

                        leftPercent = (value / maxValue) * 100;

                        tabs += '<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" id="'+(count++)+'" style="left: '+leftPercent+'%;"></a>';

                    });

                    $('#slider').html(tabs); // Issue 2 happens after this...

                repeatControl = false;

            }

        }).bind('mouseup', function() {

            console.log('Release Click');

            repeatControl = true;    

        });                        

    }).bind('keyup', function() {

        console.log('Release Keydown');

        repeatControl = true;

    }); 



Solved Issue 1 with this solution




    // Disable the mouse tracking for ui-slider-handle(s)

    $.widget('myapp.slider', $.ui.slider, {

        _mouseCapture: function( e ) {

            if ( !$( e.target ).is( this.element ) ) {

                return this._super( e );

            }

            return false;

        }    

    });




Solved Issue 2 with this solition

Another thread

Solved Issue 3 with this solution




    var ctrlIsNotDown = true;

    var mouseIsNotDown = true;

    $(document).keydown(function(event) { // Any keydown

        if (event.ctrlKey && ctrlIsNotDown) { // Check for Ctrl presses and ctrl is not already down

            console.log('Ctrl is pressed')

            $('#slider').on('click', function(mouse) {

                if (mouse.which == 1 && mouseIsNotDown && !ctrlIsNotDown) {

                    console.log('ctrl + mouse click combo pressed');

                    mouseIsNotDown = false;   

                }

            }).on('mouseup', function(mouse) {

                if (mouse.which === 1 && !mouseIsNotDown) {

                    console.log('Mouse click released');

                    mouseIsNotDown = true;                     

                }

            });

            ctrlIsNotDown = false; // Ctrl is down

        } 

    }).keyup(function() { // Any keyup

        console.log('Keys released');

        ctrlIsNotDown = true; // Ctrl is not down

    });