onclick 相关问题

无法触发子组件内保存按钮的点击事件

我在 React 应用程序的子组件中模拟保存按钮上的单击事件时遇到问题。 我有一个名为 AddQuestionsPage 的父组件，我在其中渲染多个实例...

使用 alpine js @click 传递数据

我有一个与 alpinejs @click 事件的链接 我有 alpinejs 的链接 @click event <a class="parent post_no" data-value="<?php echo $total_posts_parent ?>" @click="filterPosts(<?= $category->term_id; ?>)"><?= esc_html( $category->name); echo " ". "(" .$total_posts_parent . ")" ?></a> 如何将 Var $total_posts_parent 添加到 @click 并在我的 alpine 函数中接收它？ 功能 想要@click $total_posts_parent填充total Alpine.data("filterPosts", (adminURL) => ({ posts: "", limit: 6, category: 0, post_type_js: post_id, showDefault: true, showFiltered: false, offset: 0, total: 0, // want to get the value from the varible here 使用 $el.dataset.value 可以访问当前元素的 data-value 值，可以在 @click 事件中使用它，也可以直接在 filterPosts() 方法中使用： @click="total += parseInt($el.dataset.value); filterPosts(<?= $category->term_id; ?>)"> 或： Alpine.data("filterPosts", (adminURL) => ({ ...... total: 0, // want to get the value from the varible here filterPosts: function ($someData) { this.total += parseInt(this.$el.dataset.value); }

按钮单击事件问题最新面板未在 mat-expansion-panel 中打开

单击 mat-expansion-panel-header 内的按钮，每当单击此按钮时，都会插入新面板并仅打开最新插入的面板。 我在打开这个最新面板时遇到问题。 **HTML...

向左滑动关闭快捷栏

下面的简单代码用于显示 Snackbar。 公共无效onClick（查看视图）{ Snackbar.make(view, "替换为你自己的动作", Snackbar.LENGTH_INDEFINITE) .setAction("行动...

单击时按钮不移动（函数 moveButton）

在下面的代码中，当我单击按钮时，buttonsColumns 状态会按预期更新（如函数 moveButton 中的 console.log 所示），因此，按钮应该...

不确定如何标记 OnClick 事件

我有一个 html 文档，其中有一个表单，选择按钮会激活运行机械臂的程序，但是，我还需要将此按钮链接到另一个页面。根据研究...

如何在 React.js 中单击时克隆元素

我是react.js的初学者，我正在使用打字稿。 我想创建一个在单击时会复制自身的元素，我该怎么做？ 这是当前的代码： 从“

使用 Astro 时如何通过按钮中的 onclick 调用脚本内的函数？

这是我的例子。如何从按钮调用greeting()函数？ --- 从“@layouts/Layout.astro”导入布局； 常量问候语 = () => { console.log("你好，服务器"); ...

单击反应时按钮无法按预期工作

从“react”导入React 常量支持 = () => { 返回 （ console.log('支持')}>添加 ） } 这是

进入双击事件时如何避免单击？

这是我在 Android/Java 上区分单击与双击的基本代码： 整数 i = 0; ButtonNext.setOnClickListener(new View.OnClickListener() { @覆盖 公共无效onClick（查看v）{ ...

ontouchstart onclick 和 eventlistener 在移动设备上不起作用，但可以播放悬停动画

我再次问这个问题，因为我尝试了上一篇文章中的所有答案，但没有一个起作用，而且我也改变了一些。 我一直在开发一个网站，我使用 onclick 打开导航...

Blazor 在 FluentButton onClick 事件上设置参数

我尝试在 FluentButton Naviate 方法上设置 Id 参数，但当前上下文中不存在该引用。我是 C# 新手，花了几个小时在这上面，但没有成功。 数据流行...

将函数作为 prop 传递不起作用（反应）

我正在尝试调用从App.js 传递到AddNote.js 的handleAddNote，但我无法在AddNote 中引用它，而不会收到错误消息，提示handleAddNote 不是函数。我试过了

Javascript 函数 openFullscreen() ，如何让它在页面上的多个 iframe 上工作

在页面上我有一个 iframe，src 中有 *.pdf 文件。 <p>在页面上我有一个 iframe，src 中有 *.pdf 文件。</p> <pre><code>&lt;div class=&#34;node--view-mode-full&#34;&gt; &lt;p&gt;&lt;iframe allow=&#34;fullscreen&#34; allowfullscreen=&#34;&#34; frameborder=&#34;0&#34; height=&#34;980&#34; scrolling=&#34;no&#34; src=&#34;https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf&#34; width=&#34;660&#34;&gt;&lt;/iframe&gt;&lt;/p&gt; &lt;p&gt;&lt;iframe allow=&#34;fullscreen&#34; allowfullscreen=&#34;&#34; frameborder=&#34;0&#34; height=&#34;980&#34; scrolling=&#34;no&#34; src=&#34;https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf&#34; width=&#34;660&#34;&gt;&lt;/iframe&gt;&lt;/p&gt; &lt;/div&gt; </code></pre> <p>浏览器中内置的 pdf 查看器现在不支持 iframe 中的全屏模式。</p> <p>我找到了解决方案<a href="https://www.w3schools.com/howto/howto_js_fullscreen.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_fullscreen.asp</a>，解决了问题 - 以全屏模式打开 iframe。在 w3schools 的示例中，打开 iframe 的按钮已存在于 HTML <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen</a>.</p> <p>在我的解决方案中，我通过 javascript 添加按钮，因为带有 iframe 的页面已经存在，但没有此类按钮：</p> <pre><code>jQuery(document).ready(function($){ $(&#34;.node--view-mode-full iframe[src*=&#39;.pdf&#39;]&#34;).each(function (index) { $(this).addClass(&#39;fullscreenframe&#39;); $(this).attr(&#39;id&#39;, &#39;fullscreen-&#39;+index); $(&#39;&lt;button onclick=&#34;openFullscreen()&#34;&gt;Open in Fullscreen Mode&lt;/button&gt;&amp;nbsp;&lt;strong&gt;Tip:&lt;/strong&gt; Press the &#34;Esc&#34; key to exit full screen.&lt;br&gt;&#39;).insertBefore(this); }); }); </code></pre> <p>然后添加一个全屏打开 iframe 的功能（与 w3schools 相同）：</p> <pre><code>function openFullscreen() { var elem = document.getElementsByClassName(&#34;fullscreenframe&#34;)[0]; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /* Safari */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE11 */ elem.msRequestFullscreen(); } }; </code></pre> <p>当页面上只有一个带有 *.pdf 的 iframe 时，Everysing 工作正常。但是，当我在页面上有两个或多个 iframe，并且单击任何 iframe 附近的“以全屏模式打开”任何按钮时，我总是在全屏模式下只看到第一个 *.pdf...</p> <p>我知道，这是因为我只得到 elem = document.getElementsByClassName("fullscreenframe")[0]; 中的第一个 iframe;</p> <p>我知道我需要使用类似的每个或类似的东西，但我无法解决它。在搜索关于页面上一个全屏元素的所有解决方案时，没有关于页面上多个元素的解决方案...谢谢。</p> </question> <answer tick="true" vote="0"> <p>也许是这样的：</p> <pre><code>jQuery(document).ready(function($){ $(&#34;.node--view-mode-full iframe[src*=&#39;.pdf&#39;]&#34;).each(function (index) { $(this).addClass(&#39;fullscreenframe&#39;); $(this).attr(&#39;id&#39;, &#39;fullscreen-&#39;+index); $(&#39;&lt;button onclick=&#34;openFullscreen(&#39; + index + &#39;)&#34;&gt;Open in Fullscreen Mode&lt;/button&gt;&amp;nbsp;&lt;strong&gt;Tip:&lt;/strong&gt; Press the &#34;Esc&#34; key to exit full screen.&lt;br&gt;&#39;).insertBefore(this); }); }); function openFullscreen(index) { var elem = document.getElementsByClassName(&#34;fullscreenframe&#34;)[index]; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /* Safari */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE11 */ elem.msRequestFullscreen(); } } </code></pre> </answer> <answer tick="false" vote="0"> <p>为什么不整合 jQuery？</p> <pre><code>const fullScreen = element =&gt; element.requestFullScreen(); // all modern browsers $(function(){ $(&#34;.node--view-mode-full iframe[src*=&#39;.pdf&#39;]&#34;).each(function (index) { $(this).addClass(&#39;fullscreenframe&#39;); $(this).attr(&#39;id&#39;, &#39;fullscreen-&#39;+index); $(&#39;&lt;button class=&#34;fullScreen&#34;&gt;Open in Fullscreen Mode&lt;/button&gt;&amp;nbsp;&lt;strong&gt;Tip:&lt;/strong&gt; Press the &#34;Esc&#34; key to exit full screen.&lt;br&gt;&#39;).insertBefore(this); }); $(&#34;.fullScreen&#34;).on(&#34;click&#34;, function() { const $iFrame = $(this).closest(&#39;p&#39;).find(&#39;iframe.fullscreenframe&#39;); if ($iFrame) fullScreen($iFrame.get(0)); // pass the DOM element }); }); </code></pre> </answer> </body></html>

在元素加载后向其添加事件侦听器（vanilla JS）

我的网站有各种操作的事件侦听器。目前，一旦整个 DOM 加载完毕，我就会将这些事件监听器添加到我的元素中，如下所示： document.addEventListener('DOMContentLoaded', functi...

OnClick 事件正在刷新 ASP.NET 中的页面

我使用 Firestore 作为数据库来收集数据并通过中继器呈现数据，以使用 C# 在我的 Kesitler.aspx 页面上创建卡片。我的主要问题是，当我单击 asp:Button 元素时，它

如何将变量（url）和 ID 传递到 jQuery .load 函数？

` $(函数(){ jQuery(document).on("click",".test-click",function(e){ e.preventDefault(); var el = jQuery(this); 警报（el.attr（“href”））； ...

使用addEventListener移除Child

我刚刚学习javascript。在谷歌 Chrome 控制台上测试东西我最终得到了这个： ... 我刚刚学习javascript。在谷歌 Chrome 控制台上测试东西我最终得到了这个： <html> <head></head> <body> <div id="divi"> <button id="butti">Click Me</button> </div> </body> </html> 还有Js： function cBoton (){ var getDiv = document.getElementById("divi"); getDiv.removeChild(getDiv.lastChild); }; var getButton = document.getElementById("butti"); getButton.addEventListener("click", cBoton); 我希望按钮一点击就被删除。 ¿为什么只有在第二次点击后才起作用？ tx！ 标记中元素的 .lastChild 是 ""（尝试使用 console.log(getDiv.lastChild) 进行澄清）。 使用它来确保您正在删除所需的元素： function cBoton() { var getDiv = document.getElementById("divi"); getDiv.removeChild(getButton); }; 第一次单击时，divi的最后一个子节点是包含按钮后空格的文本节点，并且该节点将被删除。第二次单击时，该按钮是最后一个子按钮。 无价之宝.. 修改源码； /* .css */ div :nth-child(even){background-color: #f2f2f2} /*.js */ function addDiv() { var para = document.createElement("p"); var node = document.createTextNode('textHere'); // add cell code here para.appendChild(node); var element; element = document.getElementById("div1"); // to add div id recursion element.appendChild(para); } function cBoton (){ var getDiv = document.getElementById("div1"); getDiv.removeChild(getDiv.lastChild); } var getButton = document.getElementById("div1"); getButton.addEventListener("click", cBoton); /* HTML */ <html> <head></head> <body> <button onclick="addDiv()">add</button> <button onclick="cBoton()">Click Me</button> <frameset><legend>recursions</legend> <div id="div1"></div> </frameset> </body> </html> 副驾驶更新！ 您的第一个代码片段需要单击两次才能删除按钮的原因是 DOM（文档对象模型）的结构方式。当您第一次加载页面时，ID 为 divi 的 div 元素只有一个子元素，即按钮元素。但是，当您第一次单击按钮时，由于按钮元素后面有空格或换行符，会在 div 内创建一个文本节点（在 DOM 中被视为子节点）。因此，按钮不再是最后一个子节点，文本节点才是。这就是为什么需要点击两次才能删除按钮。 对于您的第二个代码片段，您似乎试图在单击“添加”按钮时向 div 添加一个段落，并在单击“单击我”按钮时删除 div 的最后一个子级。但是，您的代码中有一个错误。您尝试向 div 添加事件侦听器，而不是“Click Me”按钮。这是更正后的版本： function addDiv() { var para = document.createElement("p"); var node = document.createTextNode('textHere'); para.appendChild(node); var element = document.getElementById("div1"); element.appendChild(para); } function cBoton() { var getDiv = document.getElementById("div1"); getDiv.removeChild(getDiv.lastChild); } var getButton = document.getElementById("butti"); // Corrected here getButton.addEventListener("click", cBoton); <html> <head></head> <body> <button id="addButton" onclick="addDiv()">add</button> <!-- Added id here --> <button id="butti" onclick="cBoton()">Click Me</button> <!-- Added id here --> <frameset><legend>recursions</legend> <div id="div1"></div> </frameset> </body> </html> 这应该按预期工作。 “添加”按钮将向 div 添加一个段落，“Click Me”按钮将删除该 div 的最后一个子级。使用 JavaScript 时，请记住始终检查 DOM 的结构和元素的 id。快乐编码！

点击按钮后如何从元素收集数据？

我创建了一个简单的在线商店。我尝试创建一个脚本，在单击“添加到购物篮”按钮后从元素中检索数据。接下来，如果用户选择并将产品添加到购物篮...

如何使用ontouchstart代替onclick

我正在使用下面的代码，它可以在桌面上运行，但点击功能在移动设备上不起作用，所以我尝试使用 ontouchstart 但这也不起作用。 我究竟做错了什么？ var 视频 = 做...