Clockpicker: How to prevent click on input to open clockpicker

问题

I'm using weareoutman's clockpicker on my page. How to prevent click on input to show clockpicker or fade in overlay before clockpicker come to visible? I just wanted to fade in overlay before clockpicker shows. Click on "button" is working as desired. So far I have tried beforeShow function in clockpicker also e.preventDefault() and e.stopPropagation() -functions in jQuery.

HTML:

<div class="dialog">
    <div>Clock:</div>
    <div class="input-group" id="clockpicker">
        <input type="text" id="start-time" class="clock text-right" readonly />
        <span class="button button-gray icon icon-clock"></span>
    </div>
<div class="dialog-overlay hide"></div>
</div>

jQuery:

var clock = jQuery('#clockpicker'),
    dialog_overlay = jQuery('.dialog-overlay');

clock.clockpicker({
    autoclose: true,
    afterDone: function() {
        dialog_overlay.fadeOut('slow');
    }
});

clock.on('click', function(e) {
    dialog_overlay.fadeIn('slow', function() {
        clock.clockpicker('show');
    });
});

回答1:

I have found a solution to the problem. Set click event off in input field.

clock.find('input').off('focus.clockpicker click.clockpicker');

I hope that this solution helps someone else also.

回答2:

With recent versions of library you can do something like this:

$('#inputId').clockpicker({
        beforeShow: function e() {            
            var condition = "...";
            if (!condition) {
                e.stopPropagation();
            }
        }            
    });

来源：https://stackoverflow.com/questions/34978129/clockpicker-how-to-prevent-click-on-input-to-open-clockpicker