捕获的 onclick 函数

Question

我有一个页面包含一系列这样的标签

 <a class="IMG" href="#" onclick="openWin(this,'./photos/Snapshot_20100803.jpg');return false;"><img src="./photos/TN_Snapshot_20100803.jpg" alt="./photos/TN_Snapshot_20100803.jpg"/></a> 

openWin 创建一个窗口并在单击拇指时显示图像。该页面还包含一个“下一步”按钮，该按钮调用父页面脚本中的 nextImage 函数。 nextImage 搜索类 IMG 标记并找到以下具有类 IMG 的标记。 但现在我被困住了。我找到了正确的 a 标签并将其放在 var z 中。我可以得到一些东西 ala

cmd = z.onclick;

如果我用 alert(cmd) 显示 cmd，我会看到类似这样的内容

函数点击（事件）{ openWin(this, "./photos/Snapshot_20100804.jpg"); 返回假； }

但我不知道我有什么。我似乎无法像使用 indexOf 的字符串一样操作它。

我看到了什么？

如何将其作为字符串进行操作？

有没有什么方法可以定义函数，也许使用 eval() 并在包含 a 标签的页面中的标签上下文中执行它？

我真正想做的是点击我在页面中找到的标签。

Answer 1

您在z 中找到的是a 元素的HTMLElement 实例。当您查看其onclick 属性（这是其onclick 属性的反映）时，您会得到一个Function 实例。 Function 实例的 toString 几乎在所有实现上都返回一个包含函数反编译版本的字符串。但是，这是非标准行为，并且在最新的 JavaScript 规范的新“严格”模式中明确禁止。无论如何，反编译处理程序并不是您要解决此问题的方式。 :-)

如果可以修改 HTML，我建议将目标图片编码为数据属性，如下所示：

<a class="IMG" href="#" data-img='./photos/Snapshot_20100803.jpg' onclick="openWin(this,this.getAttribute('data-img'));return false;"><img src="./photos/TN_Snapshot_20100803.jpg" alt="./photos/TN_Snapshot_20100803.jpg"/></a>

然后，在处理“下一个”功能时，您可以简单地找到下一个a 元素（我称之为nextLink）并执行以下操作：

openWin(nextLink, nextLink.getAttribute('data-img'));

更好的是，让openWin 函数读取data-img 属性本身，这样HTML 就可以：

<a class="IMG" href="#" data-img='./photos/Snapshot_20100803.jpg' onclick="openWin(this);return false;"><img src="./photos/TN_Snapshot_20100803.jpg" alt="./photos/TN_Snapshot_20100803.jpg"/></a>

...以及在nextLink 上打开下一个的调用只是：

openWin(nextLink);

稍微缩短页面，不必重复所有this.getAttribute('data-img') 位。

前缀为 data- 的自定义属性从 HTML5 开始有效，并且它们现在适用于所有浏览器，即使是早期的文档类型（只是技术上它们在早期的文档类型中无效；我不知道有任何浏览器关心）。

有点跑题了，如果允许您进行更大的更改，您可以完全放弃a 标签上的onclick，而是通过挂钩任何容器的click 事件来使用事件冒泡所有这些a 元素。这是因为除非被取消，否则点击会沿着树向上传播（从子节点到父节点）直到它被处理，您可以通过查看事件对象来确定实际点击了哪个子节点（这样您就可以获取它的 data-img 属性。）如果您可以/想要引入像 jQuery、Prototype、Closure 等这样的库，他们可以显着简化操作。

Answer 2

如果你有这样的事情：

var z = 'function onclick(event) { openWin(this,"./photos/Snapshot_20100804.jpg"); return false; }'

您可以轻松执行此操作以执行z 中包含的字符串：

var cmd = "("+z+")();"
eval(cmd);

你可以测试一下HERE。