Disabling Drag Scroll for Text Inputs with JQuery

2019-08-02 04:28发布

问题:

I need to disable the drag scroll functionality when clicking on text inputs. The page is in the format of a table of a div with inputs inside, and you can drag the page horizontally when you click and drag anywhere. I want to make this so you can only drag when you don't click on one of the inputs, and disable the drag when an input is clicked so the input can be edited. Here is my go at it:

$('.dataContent').mousedown( function (event) { 
        if($(this).children().size()>0) {$(this)
        .data('down', true)
        .data('x', event.clientX)
        .data('scrollLeft', this.scrollLeft);

        return false;
        }

回答1:

You can use event.target to obtain the element that was the event's original target:

$('.dataContent').mousedown(function(event) {
    if ($(event.target).is("input:text")) {
        return;  // Target element is a text input, do not initiate drag.
    }

    // ...
});