可以使用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。如果有人想挑选我的解决方案，我是建设性投入的游戏。