onclick 相关问题

在页面上我有一个 iframe，src 中有 *.pdf 文件。 <p>在页面上我有一个 iframe，src 中有 *.pdf 文件。</p> <pre><code><div class="node--view-mode-full"> <p><iframe allow="fullscreen" allowfullscreen="" frameborder="0" height="980" scrolling="no" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="660"></iframe></p> <p><iframe allow="fullscreen" allowfullscreen="" frameborder="0" height="980" scrolling="no" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="660"></iframe></p> </div> </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($){ $(".node--view-mode-full iframe[src*='.pdf']").each(function (index) { $(this).addClass('fullscreenframe'); $(this).attr('id', 'fullscreen-'+index); $('<button onclick="openFullscreen()">Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>').insertBefore(this); }); }); </code></pre> <p>然后添加一个全屏打开 iframe 的功能（与 w3schools 相同）：</p> <pre><code>function openFullscreen() { var elem = document.getElementsByClassName("fullscreenframe")[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($){ $(".node--view-mode-full iframe[src*='.pdf']").each(function (index) { $(this).addClass('fullscreenframe'); $(this).attr('id', 'fullscreen-'+index); $('<button onclick="openFullscreen(' + index + ')">Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>').insertBefore(this); }); }); function openFullscreen(index) { var elem = document.getElementsByClassName("fullscreenframe")[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 => element.requestFullScreen(); // all modern browsers $(function(){ $(".node--view-mode-full iframe[src*='.pdf']").each(function (index) { $(this).addClass('fullscreenframe'); $(this).attr('id', 'fullscreen-'+index); $('<button class="fullScreen">Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>').insertBefore(this); }); $(".fullScreen").on("click", function() { const $iFrame = $(this).closest('p').find('iframe.fullscreenframe'); if ($iFrame) fullScreen($iFrame.get(0)); // pass the DOM element }); }); </code></pre> </answer> </body></html>

javascript jquery function onclick each

回答 0 投票 0

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

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

javascript onclick event-listener

回答 1 投票 0

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

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

c# asp.net asp.net-core events onclick

回答 1 投票 0

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

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

jquery onclick load

回答 1 投票 0

使用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>  <button id="butti" onclick="cBoton()">Click Me</button>  <frameset><legend>recursions</legend> <div id="div1"></div> </frameset> </body> </html> 这应该按预期工作。 “添加”按钮将向 div 添加一个段落，“Click Me”按钮将删除该 div 的最后一个子级。使用 JavaScript 时，请记住始终检查 DOM 的结构和元素的 id。快乐编码！

javascript onclick click addeventlistener removechild

回答 4 投票 0

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

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

javascript html web button onclick

回答 1 投票 0

如何使用ontouchstart代替onclick

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

javascript html mobile onclick ontouchstart

回答 1 投票 0

JS：func不是函数（onClick）

我有一个主文件，其中有一个函数：从输入读取=（值）=> { 控制台.log(值) } 我还有一个附加文件，其中包含一个函数，可以让我渲染一些按钮：出口...

javascript onclick reactjs

回答 2 投票 0

如何在js中点击x次后禁用按钮？

我正在尝试使用Javascript在单击按钮x次后禁用该按钮。为了简单起见，现在假设 x = 2。我似乎无法让计数器增加。谢谢你的任何

javascript events onclick

回答 3 投票 0

如何从鼠标单击事件导出轴索引？

此 Python 3.11 脚本显示两个图表（轴）：将 numpy 导入为 np，将 matplotlib.pyplot 导入为 plt def onclick(事件): 打印（事件.inaxes）图，axs = plt.subplots（ncols = 2，nrows = 1，figsize =（3.5，...

python matplotlib onclick

回答 3 投票 0

如何将复制到剪贴板按钮分配给特定文本 HTML 和 JavaScript

我试图在我的网站上创建许多按钮来将相应的文本复制到剪贴板，但所有按钮似乎都在复制最后的文本。我为每个文本使用了不同的 id 属性......

javascript html button onclick

回答 1 投票 0

如何防止点击时嵌套 React 组件中的事件冒泡？

这是一个基本组件。和都有 onClick 函数。我只想触发上的 onClick，而不是。我怎样才能实现这个目标？我玩过这是一个基本组件。 <ul> 和 <li> 都有 onClick 函数。我只想触发 <li> 上的 onClick，而不是 <ul>。我怎样才能实现这个目标？我尝试过 e.preventDefault()、e.stopPropagation()，但无济于事。 class List extends React.Component { constructor(props) { super(props); } handleClick() { // do something } render() { return ( <ul onClick={(e) => { console.log('parent'); this.handleClick(); }} > <li onClick={(e) => { console.log('child'); // prevent default? prevent propagation? this.handleClick(); }} > </li> </ul> ) } } // => parent // => child 我也有同样的问题。我发现 stopPropagation did 有效。我会将列表项拆分为一个单独的组件，如下所示： class List extends React.Component { handleClick = e => { // do something } render() { return ( <ul onClick={this.handleClick}> <ListItem onClick={this.handleClick}>Item</ListItem> </ul> ) } } class ListItem extends React.Component { handleClick = e => { e.stopPropagation(); // <------ Here is the magic this.props.onClick(); } render() { return ( <li onClick={this.handleClick}> {this.props.children} </li> ) } } React 使用事件委托和文档上的单个事件侦听器来处理冒泡事件，例如本例中的“单击”，这意味着不可能停止传播；当您在 React 中与真实事件交互时，真实事件已经传播。 React 的合成事件上的 stopPropagation 是可能的，因为 React 在内部处理合成事件的传播。 stopPropagation: function(e){ e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); } 关于 DOM 事件的顺序：CAPTURING vs BUBBLING 事件传播有两个阶段。这些被称为 “捕获” 和 “冒泡”。 | | / \ ---------------| |----------------- ---------------| |----------------- | element1 | | | | element1 | | | | -----------| |----------- | | -----------| |----------- | | |element2 \ / | | | |element2 | | | | | ------------------------- | | ------------------------- | | Event CAPTURING | | Event BUBBLING | ----------------------------------- ----------------------------------- 首先发生捕获阶段，然后是冒泡阶段。当您使用常规 DOM api 注册事件时，默认情况下事件将成为冒泡阶段的一部分，但这可以在事件创建时指定 // CAPTURING event button.addEventListener('click', handleClick, true) // BUBBLING events button.addEventListener('click', handleClick, false) button.addEventListener('click', handleClick) 在React中，冒泡事件也是你默认使用的。 // handleClick is a BUBBLING (synthetic) event <button onClick={handleClick}></button> // handleClick is a CAPTURING (synthetic) event <button onClickCapture={handleClick}></button> 让我们看一下handleClick回调（React）： function handleClick(e) { // This will prevent any synthetic events from firing after this one e.stopPropagation() } function handleClick(e) { // This will set e.defaultPrevented to true // (for all synthetic events firing after this one) e.preventDefault() } 我在这里没有看到提到的替代方案如果您在所有事件中调用 e.preventDefault()，您可以检查事件是否已被处理，并防止再次处理它： handleEvent(e) { if (e.defaultPrevented) return // Exits here if event has been handled e.preventDefault() // Perform whatever you need to here. } 关于合成事件和原生事件的区别，请参阅React文档：https://reactjs.org/docs/events.html 这是防止单击事件前进到下一个组件然后调用 yourFunction 的简单方法。 <Button onClick={(e)=> {e.stopPropagation(); yourFunction(someParam)}}>Delete</Button> 这不是 100% 理想，但如果在儿童中传递 props 太痛苦 -> 儿童时尚或为此目的创建 Context.Provider/Context.Consumer just），你正在处理另一个库，它有自己的处理程序，它在您的处理程序之前运行，您也可以尝试： function myHandler(e) { e.persist(); e.nativeEvent.stopImmediatePropagation(); e.stopPropagation(); } 据我了解，event.persist方法可以防止对象立即被扔回React的SyntheticEvent池中。因此，当你伸手去拿 React 中传递的 event 时，它实际上并不存在！这种情况发生在孙子中，因为 React 在内部处理事情的方式是首先检查父进程是否有 SyntheticEvent 处理程序（特别是如果父进程有回调）。只要您不调用 persist 来创建大量内存以继续创建诸如 onMouseMove 之类的事件（并且您没有创建某种 Cookie Clicker 游戏，例如 Grandma's Cookies），就应该完全没问题！另请注意：偶尔阅读他们的 GitHub，我们应该密切关注 React 的未来版本，因为他们可能最终会解决一些问题，因为他们似乎打算在编译器中折叠 React 代码/转译器。如果您希望发生嵌套元素中的操作而不是父元素中的操作，那么，您可以从父元素的操作处理程序中检查目标的类型，然后基于该类型执行操作，即，如果目标是我们的嵌套元素，我们什么也不做。否则两个处理程序都会被调用。 // Handler of the parent element. Let's assume the nested element is a checkbox function handleSingleSelection(e) { if(e.target.type !== 'checkbox') { // We do not do anything from the // parent handler if the target is a checkbox ( our nested element) // Note that the target will always be the nested element dispatch(lineSelectionSingle({ line })) } } 我在 event.stopPropagation() 工作时遇到问题。如果您也这样做，请尝试将其移动到单击处理程序函数的顶部，这就是我需要做的来阻止事件冒泡。示例函数： toggleFilter(e) { e.stopPropagation(); // If moved to the end of the function, will not work let target = e.target; let i = 10; // Sanity breaker while(true) { if (--i === 0) { return; } if (target.classList.contains("filter")) { target.classList.toggle("active"); break; } target = target.parentNode; } } 您可以通过检查事件目标来避免事件冒泡。例如，如果您将输入嵌套到 div 元素，其中有单击事件的处理程序，并且您不想处理它，则单击输入时，您可以将 event.target 传递到您的处理程序中，并检查处理程序应该是根据目标的属性执行。例如，您可以检查 if (target.localName === "input") { return}。所以，这是一种“避免”处理程序执行的方法解决此问题的另一种方法可能是在子级上设置 onMouseEnter 和 onMouseLeave 事件。（您的 < li > 标签）每当鼠标悬停在子级上时，您都可以设置一个特定的状态，以阻止父级执行 onClick 函数内容。比如： class List extends React.Component { constructor(props) { super(props) this.state.overLi = false } handleClick() { // do something } render() { return ( <ul onClick={(e) => { if (!this.state.overLi) { console.log("parent") this.handleClick() } }} > <li onClick={(e) => { console.log("child") // prevent default? prevent propagation? this.handleClick() }} onMouseEnter={() => this.setState({ overLi: true, }) } onMouseLeave={() => this.setState({ overLi: false, })} ></li> </ul> ) } } 我进行了很多搜索，但没有设法使用 e.stopPropagation() 为我的上下文实现任何解决方案您可以验证点击的元素是否是预期的元素。例如： class List extends React.Component { constructor(props) { super(props); } handleClick(e) { if(e.target.className==='class-name'){ // do something } } render() { return ( <ul {/* Replace this with handleClick */} onClick={(e) => { console.log('parent'); this.handleClick(); }} <li onClick={(e) => { console.log('child'); // prevent default? prevent propagation? this.handleClick(); }} </li> </ul> ) } } 执行此操作的新方法更加简单，并且会节省您一些时间！只需将事件传递到原始点击处理程序并调用 preventDefault();。 clickHandler(e){ e.preventDefault(); //Your functionality here }

reactjs onclick event-propagation

回答 11 投票 0

将匿名函数附加到链接的“onclick”属性

在网站的各个页面上，我通过 JavaScript 生成不同的点击处理程序，附加到特定页面元素的 innerHTML 中的链接。我用这样的实用函数来做到这一点：功能

javascript onclick anonymous-function

回答 1 投票 0

扩展图标单击事件不起作用清单版本 3

我想在用户单击任何选项卡上的我的扩展图标时监听该事件。我做了一些研究，但发现很多操作都被贬值了，我只能找到这个方法

javascript google-chrome google-chrome-extension onclick

回答 1 投票 0

onclick 相关问题

最新问题