Question

我在可拖动的div #fullMenu中使用jQuery UI滑块。拖动滑块时，＃fullMenu也会移动，因为它触发了mousedown事件。我读到了stopPropogation并且还发现了另一个确切的same question，但我无法弄清楚在我的代码中调用stopPropogation的位置。请给我你的灯！

   $(function() {
        $("#slider-range" ).slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#pricefrom" ).val(ui.values[0]);
                $( "#priceto" ).val(ui.values[1]);
                $( "#pricefromlabel" ).html(ui.values[0]);
                $( "#pricetolabel" ).html(ui.values[1]);
            }
        });
        return false;
    });

这是页面的working version，这是用于处理拖动事件的javascript代码：

var Drag = {

    obj : null,

    init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
    {
        o.onmousedown   = Drag.start;

        o.hmode         = bSwapHorzRef ? false : true ;
        o.vmode         = bSwapVertRef ? false : true ;

        o.root = oRoot && oRoot != null ? oRoot : o ;

        if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
        if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
        if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
        if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

        o.minX  = typeof minX != 'undefined' ? minX : null;
        o.minY  = typeof minY != 'undefined' ? minY : null;
        o.maxX  = typeof maxX != 'undefined' ? maxX : null;
        o.maxY  = typeof maxY != 'undefined' ? maxY : null;

        o.xMapper = fXMapper ? fXMapper : null;
        o.yMapper = fYMapper ? fYMapper : null;

        o.root.onDragStart  = new Function();
        o.root.onDragEnd    = new Function();
        o.root.onDrag       = new Function();
    },

    start : function(e)
    {
        var o = Drag.obj = this;
        e = Drag.fixE(e);
        var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
        var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
        o.root.onDragStart(x, y);

        o.lastMouseX    = e.clientX;
        o.lastMouseY    = e.clientY;

        if (o.hmode) {
            if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
            if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
        } else {
            if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
            if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
        }

        if (o.vmode) {
            if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
            if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
        } else {
            if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
            if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
        }

        document.onmousemove    = Drag.drag;
        document.onmouseup      = Drag.end;

        //Add custom check in IE, if it press scrool drag and drop event is disabled ( scrollbar has id empty )
        document.onmousedown = function(e){ 
        if (typeof e == 'undefined') e = window.event;
        var targ = e.srcElement ? e.srcElement : e.target;
            //window.status="Id:="+targ.parentNode.id;
            if(targ.parentNode.id=="") Drag.end(e) ;
        }

        return false;
    },

    drag : function(e)
    {
        e = Drag.fixE(e);
        var o = Drag.obj;

        var ey  = e.clientY;
        var ex  = e.clientX;
        var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
        var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
        var nx, ny;

        if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
        if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
        if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
        if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

        nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
        ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

        if (o.xMapper)      nx = o.xMapper(y)
        else if (o.yMapper) ny = o.yMapper(x)

        Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
        Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
        Drag.obj.lastMouseX = ex;
        Drag.obj.lastMouseY = ey;

        Drag.obj.root.onDrag(nx, ny);
        return false;
    },

    end : function()
    {
        document.onmousemove = null;
        document.onmouseup   = null;
        if(Drag.obj){
        Drag.obj.root.onDragEnd(    parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 
                                    parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
        }
        Drag.obj = null;
    },

    fixE : function(e)
    {
        if (typeof e == 'undefined') e = window.event;
        if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
        if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
        return e;
    }
};


    //<![CDATA[
    var theHandle = document.getElementById("handle");
    var theRoot   = document.getElementById("fullMenu");
    Drag.init(theHandle, theRoot);
    //]]>

滑块函数（来自jQuery UI）：

_start: function (a, b) {
    var c = {
        handle: this.handles[b],
        value: this.value()
    };
    return this.options.values && this.options.values.length && (c.value = this.values(b), c.values = this.values()), this._trigger("start", a, c)
},
_slide: function (a, b, c) {
    var d, e, f;
    this.options.values && this.options.values.length ? (d = this.values(b ? 0 : 1), this.options.values.length === 2 && this.options.range === !0 && (b === 0 && c > d || b === 1 && c < d) && (c = d), c !== this.values(b) && (e = this.values(), e[b] = c, f = this._trigger("slide", a, {
        handle: this.handles[b],
        value: c,
        values: e
    }), d = this.values(b ? 0 : 1), f !== !1 && this.values(b, c, !0))) : c !== this.value() && (f = this._trigger("slide", a, {
        handle: this.handles[b],
        value: c
    }), f !== !1 && this.value(c))
},
_stop: function (a, b) {
    var c = {
        handle: this.handles[b],
        value: this.value()
    };
    this.options.values && this.options.values.length && (c.value = this.values(b), c.values = this.values()), this._trigger("stop", a, c)
},

Answer 1

您在开始事件结束时return false;（event.preventDefault()和event.stopPropogation()同时执行了}，但问题是，您需要这个/或{<1}}在滑块的事件中。

由于您的滑块返回了一个值，因此我们无法在此处使用 return false 。

您还可以使用奇怪的UI事件命名参数。 jQuery UI事件有两个参数： stopPropogation()

(event, ui)

但是你似乎传递了不同的变量（a，b）。有没有办法可以获得原始$('#whatever').slider({ start: function(event, ui) { // your code event.stopPropogation(); // put it here } });所以你可以停止播种？

Answer 2

这是我发布的问题的解决方案，以防将来有人需要它：

    $("#slider-range" ).slider({
        range: true,
        min: <?=$startfrom?>,
        max: <?=$endat?>,
        values: [ <?=$minprice?>, <?=$maxprice?> ],

        // where .stopPropogation() needs to be:

        start: function (event, ui) {
            event.stopPropagation();
        },

        slide: function( event, ui ) {
            $( "#pricefrom" ).val(ui.values[0]);
            $( "#priceto" ).val(ui.values[1]);
            $( "#pricefromlabel" ).html(ui.values[0] + ' &euro;');
            $( "#pricetolabel" ).html(ui.values[1] + ' &euro;');
        }
    });

jQuery滑块和可拖动的div问题 - Div滑块和滑块

2 个答案: