可以使用dojo訪問與HTML元素事件關聯的功能嗎？

Question

當屏幕處於「編輯」模式時，我想要超過與元素onclick事件相關的功能。然後完成編輯後，將原始功能恢復。

所以，本來我有以下幾點：

<script type="text/javascript"> 
    var showAddNewForum = function(){ 
     dojo.byId("NewForum").className = dojo.byId("NewForum").className == 'hidden'?'':'hidden'; 
    } 
</script> 
<a onclick="showAddNewForum()" class="editable" id="AddNewForum" name="AddNewForum" style="cursor:pointer;">New Forum</a> 
     <div class="hidden" id="NewForum" name="NewForum"> 
      <form action=""> 
       <table> 
        <tr><td><label>Title</label></td><td><input type="text" id="newForumTitle"/></td></tr> 
        <tr><td><label>Description</label></td><td><input type="text" id="newForumDescription"/></td></tr> 
        <tr><td><label>Moderators</label></td><td><input type="text" id="newForumnModerators"/></td></tr> 
       </table> 
       <input type="button" value="submit"/> 
      </form> 
     </div> 

在頁面的頂部有一個管理員按鈕，將放在頁面的配置模式。所有具有可編輯類的元素都將處於配置模式，因此元素可以通過一些小形式進行配置。這個想法是基於用戶角色，屏幕上的某些控件將具有不同的行爲。例如：如果管理員以其他方式顯示，則不顯示該控件。

這是通過以下完成：

activateAdministration = function() { 
     if (editOnClickHandle.length>0) { 
      dojo.forEach(editOnClickHandle,function(item){dojo.disconnect(item)}); 
      editOnClickHandle = []; 
     }else { 
      dojo.query(".editable").forEach(function(node,idx,arr){ 
       var handler = dojo.connect(node,"onclick",function(e){ 
        console.debug(node.onclick); 
        var adminWindow = document.getElementById("adminWindow"); 
        adminWindow.className = "displayInline"; 
        adminWindow.style.top = (e.layerY + 0) + "px"; 
        adminWindow.style.left = (e.layerX + 0) + "px"; 
        document.getElementById("adminElementId").value = node.id; 
        document.getElementById("adminCurrentUrl").value = location.href; 
        document.getElementById("adminClass").value = node.className; 
       }); 
       editOnClickHandle.push(handler); 
      }); 
     } 
    } 
<a class="tool" style="cursor:pointer;" onclick="activateAdministration();">Admin</a> 

所以問題是原始的onclick功能仍連接到該事件。如果它是一個提交函數或類似的東西，那麼它也會觸發不需要的東西。

我可以設置一個處理程序的原始功能，dissconnect它，添加新的功能，然後編輯完成後，刪除新的功能，並添加回原來的？

感謝您的任何提示，我希望這個問題很明顯（可能不是）很高興地添加更多的信息，如果需要的話。

Answer 1

我會實現這個問題的方法是總是覆蓋onclick處理程序在頁面上所有可編輯的對象與處理程序，要麼乾脆委託調用原始的或者叫做管理的版本。

你可以這樣使用在道場很容易的，就像這樣：

admin_mode = false; 
    activateAdministration = function() { 
    admin_mode = true; 
    }; 

    editClick = function(e) { 
    console.debug("..in admin edit function; this=%o; e=%o", this, e); 
    // do your admin stuff here 
    // var node = this; 
    }; 

    dojo.query('.editable').forEach(function(node) { 

    if (node.onclick) { 
     var original_onclick = node.onclick; 
     node.onclick = function() { 
     if (admin_mode) { 
      console.debug("calling admin onclick handler"); 
      editClick.apply(node, arguments); 
     } else { 
      // delegate 
      console.debug("calling original onclick handler"); 
      original_onclick.apply(node, arguments); 
     } 
     } 
    } 

    }); 

我與HTML測試這樣的：

<a onclick="console.debug('I am the original!; this=%o; args=%o', this, arguments);" 
    class="editable"> 
    EDITABLE 
</a> 

<a onclick="console.debug('Me too!; this=%o; args=%o', this, arguments);" 
    class="editable"> 
    ALSO EDITABLE 
</a> 

Answer 2

您是否控制showAddNewForum（）函數的代碼並將其插入到HTML中？在這種情況下，我可能只使用一個處理器，是這樣的：

dojo.connect(dojo.byId("AddNewForum"), "onclick", function(evt) { 
    if (dojo.hasClass(evt.target, "editable") { 
     //do the editing work here 
     doConfiguration(evt.target); 
    } else { 
     //do regular work here. 
     doRegularAction(evt.target); 
    } 
}); 

要麼或者扶住把手連接和註銷，當您更改頁面配置模式寄存器是正確的。

Answer 3

首先讓我說我恨IE，特別是IE6。當我的公司最終離開IE6時，這將是一個美好的一天。所以我如何解決這個問題是我設置了一個名爲oldclick的屬性爲node.onclick，然後在激活管理時設置node.onclick =「」。另一方面，我斷開連線，並將oldclick添加回onclick。

var editOnClickHandle = []; 
activateAdministration = function() { 
     if (editOnClickHandle.length>0) {//turn off administration 
      dojo.forEach(editOnClickHandle,function(item){dojo.disconnect(item)}); 
      dojo.query(".editable").forEach(function(node,idx,arr){ 
       if(dojo.isIE){ 
        node.onclick=node.getAttribute("oldclick"); 
       }else{ 
        node.onclick=dojo.hitch(node.onclick,node.getAttribute("oldclick")); 
       }    
      }); 
      editOnClickHandle = []; 
     }else {//turn on administration 
      dojo.query(".editable").forEach(function(node,idx,arr){ 
       var onClickName = new String(node.getAttribute("onclick")); 
       var oldClickName = onClickName.substring(0,onClickName.indexOf("(")); 
       if(dojo.isIE){ 
        node.setAttribute("oldclick",node.onclick); 
       }else{ 
        node.setAttribute("oldclick",oldClickName); 
       } 
       node.onclick=""; 
       editOnClickHandle.push(dojo.connect(node,"onclick",editClick)); 
      }); 
     } 
    } 

與此問題無關，但爲了清晰起見，我將小管理員窗口代碼重構爲稱爲editClick的分離函數。它看起來像：

editClick = function(e){ 
    console.debug(e); 
    var adminWindow = document.getElementById("adminWindow"); 
    adminWindow.className = "displayInline"; 
    adminWindow.style.top = (e.layerY + 0) + "px"; 
    adminWindow.style.left = (e.layerX + 0) + "px"; 
    document.getElementById("adminElementId").value = e.target.id; 
    document.getElementById("adminCurrentUrl").value = location.href; 
    document.getElementById("adminClass").value = e.target.className; 
} 

所以希望這將有助於未來的人，感謝您的幫助jrburke。如果有人想挑選我的解決方案，我是建設性投入的遊戲。