通過JavaScript可以使（可能動態加載的）元素可點擊，但優先考慮包含在

中的鏈接我將自定義數據屬性data-js-href添加到各種HTML元素，並且這些元素的行爲就像點擊時的鏈接。如果單擊該元素中的鏈接，則應該優先考慮該鏈接，但應該忽略該功能。此外，該解決方案還需要處理稍後動態添加的元素。通過JavaScript可以使（可能動態加載的）元素可點擊，但優先考慮包含在

到目前爲止，我已經想出了以下解決方案。它主要檢查點擊是否在鏈接或鏈接的任何子元素上執行（請考慮<a href='…'><img src='…' alt='…' /></a>）。

// Make all elements with a `data-js-href` attribute clickable 
$$('body').addEvent('click:relay([data-js-href])', 
        function(event, clicked) { 
    var link = clicked.get('data-js-href'); 
    if (link && !event.target.match('a')) { 
     var parents = event.target.getParents(); 
     for (var i = 0; i < parents.length && parents[i] != clicked; i++) { 
      if (parents[i].match('a')) { 
       return; 
      } 
     } 
     document.location.href = link; 
    } 
});

它的工作原理，但感覺很笨拙，我認爲必須有一個更好的解決方案。我嘗試了一些沿線

$$('body').addEvent('click:relay([data-js-href] a)', 
        function(event, clicked) { 
    event.stopPropagation(); 
}

但無濟於事。（我用一些console.log()消息散佈代碼來驗證行爲。）任何想法都是值得歡迎的。

來源

2011-10-13 igor

您可以使用2個委託事件來做到這一點 - 無需反向查找，而且它們便宜，因爲它們將共享相同的事件。缺點是，它是同一個事件，所以它會觸發這兩個事件並且沒有通過事件方法停止它（已經冒泡了，它是一個事件堆積多個僞事件回調並按順序執行它們 - 事件已停止但回調仍在繼續）這可能是mootools事件與授權實現不一致的地方，但它是另一個問題的主題。

變通辦法，現在可以：

具有2個事件處理程序通過相互通信。它將擴展和增加任何新的els。

在兩個不同的元素上添加委託人。例如。 document.body和#mainWrap。

http://jsfiddle.net/dimitar/J59PD/4/

var showURL = function(howLong) { 
    // debug. 
    return function() { 
     console.log(window.location.href); 
    }.delay(howLong || 1000); 
}; 

document.id(document.body).addEvents({ 
    "click:relay([data-js-href] a))": function(e) { 
     // performance on lookup for repeat clicks. 
     var parent = this.retrieve("parent"); 
     if (!parent) { 
      parent = this.getParent("[data-js-href]"); 
      this.store("parent", parent); 
     } 
     // communicate it's a dummy event to parent delegator. 
     parent.store("linkEvent", e); 
     // let it bubble... 
    }, 
    "click:relay([data-js-href])": function(e) { 
     // show where we have gone. 
     showURL(1500); 
     if (this.retrieve("linkEvent")) { 
      this.eliminate("linkEvent"); 
      return; 
     } 
     var prop = this.get("data-js-href"); 
     if (prop) 
      window.location.href = prop; 


    } 
});

與Ibolmo和Keeto從MooTools團隊的IRC討論這個問題，以及當我最初的嘗試未能奏效兩者回調解僱儘管event.stop：http://jsfiddle.net/dimitar/J59PD/

結果，簡單地在mootools的github問題上打開了一張票：https://github.com/mootools/mootools-core/issues/2105，但它然後討論了從圖書館的角度來看正確的事情是什麼，以及如何改變事情的工作方式是可行的......

來源

2011-10-13 22:32:19

感謝您真正有用的解釋，爲什麼事件無法停止。我最終使用了兩個不同元素的委託人，這似乎爲我提供了更容易理解的代碼。 – igor

通過JavaScript可以使（可能動態加載的）元素可點擊，但優先考慮包含在

回答

相關問題