我如何使自己的屬性（HTML5）

我在JS（moveableFunc）中實現了一個可移動的div函數。我用onclick =「moveableFunc（event，this）」爲每個div（或元素）來移動它。我更喜歡使用該功能作爲attribue和代碼將是如下：我如何使自己的屬性（HTML5）

<div id="div1" data-option="moveable" class="div1"> 
    hello 
</div>

我該怎麼辦呢？

來源

2013-04-25 user2004403

你用普通'javascript'或者你已經在使用或者計劃使用類似'jquery'的庫嗎？ – 2013-04-25 06:38:19

moveableFunc的實現只能通過javascript。 – user2004403 2013-04-25 06:47:02

你可以在window.onload的click綁定事件僅適用於該屬性的元素，如：

window.onload = function() { 
    var moves = document.querySelectorAll('[data-option="moveable"]'); 
    for (var i = 0; i < moves.length; i++) { 
     moves[i].onclick = function (e) { 
      e = e || window.event; 
      moveableFunc(e, this); 
     }; 
    } 
};

你甚至可以改變選擇爲.querySelectorAll('div[data-option="moveable"]');，如果你知道這將只針對<div> S，所以會加快搜索速度。

或者，如果你能調整你moveableFunc的參數是：

function moveableFunc(e) { 
    // Use `this` to reference the element that was clicked 
}

然後，你可以只使用下面的事件在循環綁定：

moves[i].onclick = moveableFunc;

當然，最好使用addEventListener而不是onclick來綁定事件。這裏有一些信息：addEventListener vs onclick

參考文獻：

$('[data-option="moveable"]').on("click", moveableFunc);

：

而只是作爲一個例子，用jQuery，它可以像做

（你修改了t他參數moveableFunc就像我之前說過的那樣）

來源

2013-04-25 06:39:42 Ian

** + 1 **事件如果我會更嚴格並說出**，那麼**最好使用'addEventListener'而不是'onclick'，因爲使用'on ... ='總是有覆蓋的風險一個已經設置的回調在其他地方沒有注意到它。 – 2013-04-25 06:48:32

@ t.niese非常真實。大多數情況下，您應該使用'addEventListener'，但儘管可能有其他人，但沒有理由認爲還有其他事件處理程序。無論如何，我同意，並且我添加了一個解釋差異的鏈接 - 對於我來說，解釋它並不是真的需要我提供鏈接 – Ian 2013-04-25 06:51:50

我嘗試了第一個選項（現在），在第二行之後，我得到了：移動。長度= 0。該代碼是： – user2004403 2013-04-25 08:11:24

我如何使自己的屬性（HTML5）

回答

相關問題