具体什么将在JSFiddle中成功触发JavaScript单击事件

What specifically will successfully trigger a JavaScript click event in JSFiddle?

本文关键字：JavaScript 单击 事件 成功 什么 JSFiddle      更新时间：2023-09-26

我试图让按钮点击事件在单击后JavaScript代码触发某个事件。

当我尝试在我的项目中执行单击触发器时，没有任何问题，但我似乎无法使用 JSFiddle 让它工作。

我首先遵循了这里的提示：JavaScript 无法在 jsfiddle.net 上运行

具体来说，梅德·奥穆拉利耶夫（meder omuraliev）写道："所以而不是 

<p onclick="lol()" id="foo">

你会做的 

var e = document.getElementById('foo'); 
e.onclick = lol;

仅在 JS 中。

我

试图遵循这个指令，这可以在我在这里制作的简单示例中看到（不起作用）：https://jsfiddle.net/b7yj3cph/3/

var e = document.getElementById('test');
e.onclick = example;
var example = function( {
    alert("hello");
});
<button id='test' type="button" onclick="example()">
  <div>
  Hello
  </div>

我尝试了其他来源和方法，但无法正常工作。我尝试了W3Schools（https://jsfiddle.net/b7yj3cph/）的示例，并通过搜索"jsfiddle button onclick"（https://jsfiddle.net/Dogbyte/62cd0LLq/）尝试了一些JSFiddles，有些不起作用。

但有些人做到了;像这个（http://jsfiddle.net/lesson8/h4JXs/1/）似乎工作正常。

是什么独特地使点击触发器适用于某些 JSFiddles 而不适用于其他 JSFiddles？我怀疑这与$(document).ready()部分有关，但我一直在阅读各种方法来使其工作，但我找不到任何对我来说有意义的东西。

回到我之前分享的堆栈溢出线程，投票最多的回应有 3 条建议：

  1. "（ 最简单， 最快， 不理想 ） - 将函数 blah（）{} 更改为 window.blah = function（）{};使功能全球化。

好吧，在这里发布的按预期工作的JSFiddle中，没有使用window。我试图使用window被证明是徒劳的。

  1. "（理想方式） - 使用不显眼的Javascript将行为仅从JS内部附加到DOM元素，这意味着将HTML与JS."

这是一个很好的观点，很有道理，但仍然没有解决我的特殊问题问题。

  1. "让jsfiddle不要包裹加载的东西。将onLoad改为无包裹（身体或头部）。

我的特定示例没有包含在onLoad中（至少，我认为不是）。无论如何，谢谢！

你的小提琴有两个问题：

首先，您的example函数声明不正确：

var e = document.getElementById('test');
e.onclick = example;
var example = function( { // parenthasis should be closed before opening braces
    alert("hello");
});

应该是：

var e = document.getElementById('test');
e.onclick = example;
var example = function() {
    alert("hello");
}

其次，您在 onclick 分配下方声明var example，该分配被解释为：

e.onclick = undefined

只需将var example移到e.onclick上方并修复语法问题，它就会起作用：

var e = document.getElementById('test');
var example = function() {
    alert("hello");
}
e.onclick = example;

如果您不想等待 DOM 加载，这就是方法。

document.getElementById('btnSave').addEventListener('click',() => {
    alert('clicked the damn button!');
});

将某些内容附加到 .onclick 不起作用的原因是，为此，您必须等待 DOM 加载;在这种情况下，操作顺序非常重要。

相关文章：