單擊同一元素上兩個腳本的事件？

Question

編輯：我想我得到了解決方案！在我要求進一步幫助之前，我想自己嘗試修復此問題=）

第一個腳本禁止第二個腳本作爲來自第一個腳本的click事件覆蓋第二個腳本。因爲第二個不起作用，所以不可能打開下拉菜單來選擇一個列表項來觸發第一個腳本點擊。

我試着用event.stopPropagation（）替換所有返回的錯誤語句。但沒有工作。試圖重新排序我的腳本，但也失敗了。我正在考慮讓我的第二個腳本以另一個父div爲目標，但那也沒用。我也嘗試了event.stopImmediatePropagation（）和.bind方法。

有什麼想法？

第一個使下拉功能的腳本。包含點擊事件。

function DropDown(el) { 
     this.f = el; 
     this.placeholder = this.f.children('span'); 
     this.opts = this.f.find('ul.dropdown > li'); 
     this.val = ''; 
     this.index = -1; 
     this.initEvents(); 
    } 
    DropDown.prototype = { 
     initEvents : function() { 
      var obj = this; 

      obj.f.on('click', function(event){ 
       $(this).toggleClass('active'); 
       return false; 
      }); 

      obj.opts.on('click',function(){ 
       var opt = $(this); 
       obj.val = opt.text(); 
       obj.index = opt.index(); 
       obj.placeholder.text(obj.val); 
      }); 
     }, 
     getValue : function() { 
      return this.val; 
     }, 
     getIndex : function() { 
      return this.index; 
     } 
    } 

    $(function() { 

     var f = new DropDown($('#f')); 

     $(document).click(function() { 
      // all dropdowns 
      $('.filter-buttons').removeClass('active'); 
     }); 

    }); 

，做了過濾的第二腳本，還包含點擊事件：

jQuery(document).ready(function(e) { 
    var t = $(".filter-container"); 
    t.imagesLoaded(function() { 
     t.isotope({ 
      itemSelector: "figure", 
      filter: "*", 
      resizable: false, 
      animationEngine: "jquery" 
     }) 
    }); 
    $(".filter-buttons a").click(function(evt) { 
    var n = $(this).parents(".filter-buttons"); 
     n.find(".selected").removeClass("selected"); 
     $(this).addClass("selected"); 
     var r = $(this).attr("data-filter"); 
     t.isotope({ 
      filter: r 
     }); 
    evt.preventDefault(); 
}); 
    $(window).resize(function() { 
     var n = $(window).width(); 
     t.isotope("reLayout") 
    }).trigger("resize") 
}); 

HTML結構

<div id="f" class="filter-buttons" tabindex="1"> 
        <span>Choose Genre</span> 
        <ul class="dropdown"> 
         <li><a href="#" data-filter="*" class="selected">All</a></li> 
         <li><a href="#" data-filter=".electronic">Electronic</a></li> 
         <li><a href="#" data-filter=".popular">Popular</a></a></li> 
        </ul> 
       </div> 

Answer 1

我想你會需要簡化這個要弄清楚什麼是繼續。實際上沒有足夠的信息來查看事件附加到這裏的元素。

爲了便於討論，打開控制檯和嘗試以下操作：

$(document).on('click', function() { console.log('first'); return false; }); 
$(document).on('click', function() { console.log('second'); return false; }); 

然後單擊頁面。你會看到兩個事件都被觸發。很可能你的代碼實際上是將事件附加到不同的元素上（你不會在任何地方說）。如果是這種情況，那麼你需要了解事件冒泡如何在DOM中工作。

當你觸發一個事件時，如果點擊一個元素，那個事件將在該元素上觸發，然後觸發父項，然後是祖父母等，一直到頂部的根節點。

您可以通過在事件本身中調用函數來更改此行爲。 evt.stopPropagation告訴事件不會冒泡到祖先節點。 evt.preventDefault告訴瀏覽器不要執行節點的默認行爲（例如，移動到在href中爲A標籤指定的頁面）。

在jQuery中，來自事件處理程序的return false是evt.preventDefault和evt.stopPropagation的快捷方式。這樣可以阻止事件的發展。

我想你有這樣的：

<div event_two_on_here> 
    <a event_one_on_here> 
</div> 

如果處理event_one_on_here電話stopPropagation的東西，然後event_two_on_here甚至不會知道它已經發生。顯式或隱式調用stopPropagation（return false）會在事件傳播到父節點/事件處理程序之前終止事件。

更新：在你的情況下，問題是.filter-buttons a處理程序正在停止傳播（所以#f不能運行其處理程序）。

$(".filter-buttons a").click(function(evt) { 
    // your code here... 

    // Don't do this - it stops the event from bubbling up to the #f div 
    // return false; 

    // instead, you'll probably just want to prevent the browser default 
    // behaviour so it doesn't jump to the top of the page ('url/#') 
    evt.preventDefault(); 
}); 

Answer 2

這並不能真正解決你的問題，但我很無聊一邊喝我的咖啡，感覺就像幫助你寫你的下拉插件更好一點

我下面的評論是內嵌代碼。對於不間斷的代碼，請參見DropDown complete paste。

---

我們開始使用標準的jQuery包裝器(function($){ ... })(jQuery)

(function($) { 

    // dropdown constructor 
    function DropDown($elem) { 

首先，我們將做一些私人增值經銷商來存儲信息。通過使用this.foo = ...，我們可能會（不必要地）揭露事物。如果你需要訪問這些變量，你總是可以創建函數來讀取它們。這是更好的封裝imo。

// private vars 
    var $placeholder = $elem.children("span"); 
    var $opts = $elem.find("ul.dropdown > li") 
    var value = ""; 
    var index = -1; 

現在我們將定義我們的事件偵聽器和那些事件偵聽器可能依賴的函數。什麼是好的這裏是這些函數沒有訪問所有通過this.*或者你正在寫obj.f.*等

// private functions 
    function onParentClick(event) { 
     $elem.toggleClass("active"); 
     event.preventDefault(); 
    } 

    function onChildClick(event) { 
     setValue($(this)); 
     event.preventDefault(); 
    } 

    function setValue($opt) { 
     value = $opt.text(); 
     index = $opt.index(); 
     $placeholder.text(value); 
    } 

這裏的一些屬性描述閱讀index和value

// properties for reading .index and .value 
    Object.defineProperty(this, "value", { 
     get: function() { return value; } 
    }); 

    Object.defineProperty(this, "index", { 
     get: function() { return index; } 
    }); 

最後，讓我們跟蹤一個數組中的DropDown的每個實例，以便用戶不必定義特殊的偵聽器來停用每個實例。

// track each instance of 
    DropDown._instances.push(this); 
    } 

這是數組，我們將使用跟蹤情況

// store all instances in array 
    DropDown._instances = []; 

此事件偵聽器禁用下拉

// deactivate all 
    DropDown.deactiveAll = function deactiveAll(event) { 
    $.each(DropDown._instances, function(idx, $elem) { 
     $elem.removeClass("active"); 
    }); 
    } 

這裏的每個「註冊」實例的定義權在插件文件聽衆！用戶不再設置此

// listener to deactiveAll dropdowns 
    $(document).click(DropDown.deactiveAll); 

還不如讓一個jQuery插件，因爲一切都在我們的下拉構造函數依賴於jQuery的。這讓我們的用戶做var x = $("foo").dropdown();

// jQuery plugin 
    $.fn.dropdown = function dropdown() { 
    return new DropDown($(this)); 
    }; 

關閉包裝

})(jQuery); 

---

現在，這裏是你如何使用它

$(function() { 
    var x = $('#f').dropdown(); 

    // get the value 
    f.value; 

    // get the index 
    f.index; 
}); 

---

無論如何，是的，我知道這並未」 t真的幫助你與你的點擊聽衆，埠我希望這仍然是對你有用的信息。現在就去郵局吧！