jQuery滑塊和可拖動div問題 - Div滑塊和滑塊

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用戶界面）：

_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

這是解決我張貼，以防有人的問題，需要在將來：

$("#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;'); 
     } 
    }); 

Answer 2

你有return false;（event.preventDefault() & event.stopPropogation()）開頭事件，但問題是，在滑塊的事件中，您需要此/或stopPropogation()。

由於您的滑塊正在返回一個值，因此我們無法在此處使用返回false。

您還有一些奇怪地爲UI事件命名的參數。 jQuery UI的事件有兩個參數：(event, ui)

$('#whatever').slider({ 

    start: function(event, ui) { 
     // your code 

     event.stopPropogation(); // put it here 
    } 

}); 

但你似乎傳遞不同的變量（A，B）。有沒有什麼辦法可以得到原始的event，這樣你就可以阻止進度了？