可以dojo访问与HTML元素事件相关的函数？ [英] Can dojo Access the function assosiated with a HTML elements Event?

问题描述

当屏幕处于编辑模式时，我想要覆盖与元素onclick事件相关联的功能。然后完成编辑后，将原来的功能恢复。

I would like to over ride the function associated with an elements onclick event when the screen is in "edit" mode. Then when done editing put the original function back.

所以，原来我有以下：

<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>

在页面顶部有一个管理按钮，将页面置于配置模式。具有可编辑类的所有元素将处于配置模式，因此元素可以通过一个小的形式进行配置。这个想法是屏幕上的某些控件将基于用户角色具有不同的行为。示例：如果管理员显示其他方式不显示控件。

At the top of the page there is an Admin button that will put the page in configuration mode. All elements with a class of editable will be in configuration mode so the element can be configure through a little form. The idea is certain controls on the screen will have different behavior based on a users role. example: If administrator show it other wise do not display the control.

这是通过以下方式完成的：

This is done with the following:

    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函数仍然附加到事件。如果它是一个提交函数或类似的东西，那么它也会触发，这是不需要的。

So the problem is the original onclick function is still attached to the event. If it were a submit function or something like that then it would also fire which is not desired.

我可以设置一个处理程序到原始函数，解除连接，添加新功能，然后完成编辑删除新功能并添加原来的一个？

Can I set a handler to the original function, dissconnect it, add the new function, and then when done editing remove the new function and add the original one back?

感谢任何提示，我希望问题是清楚的（可能不是）快乐如果需要，可以添加更多信息。

Thanks for any tips, I hope the question is clear (probably not) happy to add more info if needed.

推荐答案

我将实现这一点的方式是永远覆盖onclick处理程序在页面上的每个可编辑对象，一个处理程序，简单地将调用委托给原始或称为管理员版本。

The way I would implement this is to always override the onclick handler for every editable object on the page with a handler that either simply delegated the call to the original or called the admin version.

你可以把这个很容易dojo，如下所示：

You can wire this up pretty easy in dojo, like this:

  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进行了测试：

I tested it with HTML like this:

<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>

这篇关于可以dojo访问与HTML元素事件相关的函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！