dom-events 相关问题

任何人都可以将此 jQuery 代码更改为 Vanilla JS。包装纸和卡片上的鼠标悬停我正在展示卡片。并且 onmouseleave 它再次去显示无。任何人都可以将此 jQuery 代码更改为 Vanilla JS. 鼠标悬停在包装纸和卡片上我正在展示卡片。并且 onmouseleave 它再次显示无。 <div class="wrapper" onmouseover="show(this);" onmouseleave="hide(this);"> <div class="box"></div> <div class="card" onmouseover="show(this);" onmouseleave="hide(this);"> <img src="img-2"> </div> </div> <div class="wrapper" onmouseover="show(this);" onmouseleave="hide(this);"> <div class="box"></div> <div class="card" onmouseover="show(this);" onmouseleave="hide(this);"> <img src="img-1"> </div> </div> function show(e) { $(e).find('.card').css('display','block'); } function hide(e) { $(e).find('.card').css('display','none'); } 以下应该可以解决问题 function hide(el){ el.querySelector(".card").style.display = "none"; } function show(el){ el.querySelector(".card").style.display = "block"; } 你也可以用纯 CSS 做到这一点： .card{ width: 100px; height: 100px; display: none; background-color: red; } .container{ background-color: lightgrey; border: 2px solid black; } .container:hover > .card{ display: block; } <div class="container"> <h2> Title </h2> <div class="card"> </div> </div> 您必须对代码进行以下更改： function show(element) { const cardElement = element.getElementsByClassName("card")[0]; if (cardElement) { cardElement.style.display = 'block'; } } function hide(element) { const cardElement = element.getElementsByClassName("card")[0]; if (cardElement) { cardElement.style.display = 'none'; } } .container { display: flex; flex-direction: row; gap: 10px; } .wrapper { width: 60px; height: 60px; background-color: #f00; display: block; } .card { display: none; } <div class="container"> <div class="wrapper" onmouseover="show(this);" onmouseleave="hide(this);"> <div class="box"></div> <div class="card"> <img src="https://api.dicebear.com/5.x/pixel-art-neutral/svg?seed=img-2"> </div> </div> <div class="wrapper" onmouseover="show(this);" onmouseleave="hide(this);"> <div class="box"></div> <div class="card"> <img src="https://api.dicebear.com/5.x/pixel-art-neutral/svg?seed=img-1"> </div> </div> </div> 您也可以仅使用 CSS 实现相同的效果： .container { display: flex; flex-direction: row; gap: 10px; } .wrapper { width: 60px; height: 60px; background-color: #f00; display: block; } /* This definition works to replace `onmouseleave` */ .card { display: none; } /* This definition works to replace `onmouseover` */ .wrapper:hover > .card { display: block; } <div class="container"> <div class="wrapper"> <div class="box"></div> <div class="card"> <img src="https://api.dicebear.com/5.x/pixel-art-neutral/svg?seed=img-2"> </div> </div> <div class="wrapper"> <div class="box"></div> <div class="card"> <img src="https://api.dicebear.com/5.x/pixel-art-neutral/svg?seed=img-1"> </div> </div> </div> JQuery 的 find 是一个子选择器（因此您正在寻找您要选择的实际元素的子元素）所以取决于你想要触发功能的元素， // on clicked element function show(el) { el.style.display = "block"; } // on all siblings function show(el) { let elem=el.nextElementSibling; while(elem){ $(elem).css('display', 'block'); elem=elem.nextElementSibling; } let elem=el.previousElementSibling; while(elem){ $(elem).css('display', 'block'); elem=elem.previousElementSibling; } } // on siblings with class .card and itself function show(el) { $(el.parentElement).find('.card').css('display', 'block'); } // of children with class .card function show(el) { $(el.parentElement).find('.card').css('display', 'block'); } // You can also filter with standard operators. eg: el !== $(el.parentElement).find('.card')[0] 但归根结底，只需使用 CSS 选择器：例如： .card:hover { display: none; } .wrapper:hover .card { display: block; } .wrapper:not(:hover) .card { display: none; } // and so on... 此外，我不是 100% 确定 display: none 和 onMouse 效果兼容，你应该尝试使用 opacity: 0 或类似的东西

javascript jquery web frontend dom-events

回答 3 投票 0

动态改变滚动背景颜色

有没有办法在滚动时动态改变背景颜色？例如，参考这个网站（https://www.samsung.com/sec/smartphones/galaxy-note9/）当您第一次访问该站点时，背景 ...

javascript css dom-events

回答 5 投票 0

为什么 React 的 onContextMenu 在 Chrome 中的禁用元素上工作？

我发现了一件很奇怪的事情。在所有主流浏览器中，上下文菜单事件对禁用的元素不起作用，因此这不会打印到控制台：我发现了一件很奇怪的事情。在所有主流浏览器中，上下文菜单事件对禁用的元素不起作用，因此这不会打印到控制台： <button type="button" onContextMenu="console.log(123)" disabled > Click me </button> 但它与 React 有点不同。我试图通过 React 组件做同样的事情： const MyComponent = () => ( <button type="button" onContextMenu={() => console.log(123)} disabled > Click me </button> ); 这一次，在 Chrome 中它会打印到控制台，但在其他浏览器中它不会。出于教育目的，我试图了解 HTML 的onContextMenu 和 React 的onContextMenu 之间的区别以及为什么只有 Chrome 以不同的方式处理它。超级奇怪。转载于Codesandbox 我花了一段时间来研究这个。这似乎是 Chrome 中的一个错误，尽管 contextmenu 是 PointerEvent 的一种，但它会在禁用元素上触发但只有冒泡时. 这是一个没有 React 的 JSFiddle：https://jsfiddle.net/bpe0yoc6/4/ // Only in chrome does this fire document.querySelector("#root").addEventListener("contextmenu", (e) => { console.log("contextmenu fired", e.target.tagName) }) document.querySelector("#root").addEventListener("click", (e) => { console.log("click fired", e.target.tagName) }) #root { width: 200px; height: 200px; display: block; background-color: #ccc; } <div id="root"> <button type="button" disabled > Click me </button> </div> React 在 DOM 树的根部注册事件句柄，这就是这样做的原因： document.querySelector("button").addEventListener("contextmenu", (e) => { ... }) 不会触发禁用按钮，也不会oncontextmenu. 我在 Chromium 问题跟踪器上开了一个问题：https://bugs.chromium.org/p/chromium/issues/detail?id=1421370

javascript reactjs google-chrome dom-events contextmenu

回答 1 投票 0

Auto suggest PHP ajax with two input boxes not working with the given sample code

我有一个代码来获取搜索建议，下面是代码： </...</desc> <question vote="0"> <p>我有一个代码来获得搜索建议，下面是代码：</p> <pre><code><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script> function suggest(inputString){ if(inputString.length == 0) { $('#suggestions').fadeOut(); } else { $('#country').addClass('load'); $.post("autosuggest.php", {queryString: ""+inputString+""}, function(data){ if(data.length >0) { $('#suggestions').fadeIn(); $('#suggestionsList').html(data); $('#country').removeClass('load'); } }); } } function fill(thisValue) { $('#country').val(thisValue); setTimeout("$('#suggestions').fadeOut();", 600); } </script> <form id="form" action="#"> <div id="suggest">To: <br /> <input type="text" size="40" value="" id="country" onkeyup="suggest(this.value);" onblur="fill();" class="" /> <div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="arrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <div class="suggestionList" id="suggestionsList"> &nbsp; </div> </div> </div> </form></td><td> <form id="torm" action="#"> <div id="suggest">From: <br /> <input type="text" size="40" value="" id="country" onkeyup="suggest(this.value);" onblur="fill();" class="" /> <div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="arrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <div class="suggestionList" id="suggestionsList"> &nbsp; </div> </div> </div> </form> </code></pre> <p>只给出了一个表格并且代码运行良好，但是当我添加另一个表格并在那里输入一个键时，它仍然会获取第一个表格的建议。请帮助我。</p> </question> <answer tick="false" vote="0"> <p>这可能是 2 个建议框具有相同 id 的问题.. 为 2 个表单提供单独的 id 并将其传递给 suggest() 函数</p> </answer> <answer tick="false" vote="0"> <p>因为您的 ID 对于“国家/地区”、“建议”和“建议列表”是相同的，如果结果转到这些 ID，它将获得找到的第一个 ID，您的 ID 应该是唯一的。 </p> </answer> </body></html>

javascript dom-events

回答 0 投票 0

点击事件不会触发移动目标

我正在编写一个带有移动球的 JavaScript 游戏。当用户设法点击移动的球时，我想要一条警告消息。它现在正在工作，但事件并非每次都触发。看起来

javascript dom-events

回答 1 投票 0

将自定义数据传递给模拟的 JavaScript 事件

我希望能够将自定义数据传递给模拟的 JavaScript 事件，以便我可以在事件侦听器回调中唯一标识此模拟事件。例如，如果我要调用：变量事件 =

javascript dom-events

回答 1 投票 0

类型“EventTarget”上不存在属性“数据集”

单击后尝试访问按钮上的数据集时，出现此^错误。 linkProvider = (ev: React.SyntheticEvent) => { console.debug('ev.target', ev.target.dataset[...

typescript dom-events

回答 3 投票 0

事件监听器的重新声明

我有一个恼人的问题，除非我重新声明一个事件框架，否则潜伏了一段时间的潜在错误就会浮出水面。这个错误是我要解决的问题，但我需要一个答案......

javascript dom-events

回答 1 投票 0

如何找到窃取 DOM 焦点的函数？

我正在尝试调试我的应用程序与 Stripe 的 Elements 组件库之间的集成。在沙盒模式下一切正常，但我们在 3D Secure 正版中遇到了生产问题...

javascript html stripe-payments dom-events focus

回答 2 投票 0

在 javascript 中激活颜色拾取吸管

我想在单击按钮时在 javascript 中激活颜色拾取吸管，这是我的代码在这里，我通过它的类名定位按钮，然后我试图在单击它时添加一个事件。

javascript html dom-events addeventlistener color-picker

回答 0 投票 0

跨标签的事件监听器

我有两个窗口：窗口A和窗口B。窗口 A 和窗口 B 在同一个 Web 浏览器上处于活动状态。窗口 A 包含一个脚本。问题：窗口 A 是否可以监听事件...

javascript jquery dom-events keyboard-events

回答 3 投票 0

我在内部元素上没有点击处理程序，但它会触发外部元素中的点击

表格 DIV <body> <form id="form">FORM <div id="div" style="background-color: aqua;">DIV <p id="p" style="background-color: blue;">P</p> </div> </form> <script src="index.js"></script> </body> JS: let form = document.getElementById('form'); let div = document.getElementById('div'); let p = document.getElementById('p'); form.addEventListener("click", e => { // why is this event triggered when I click on p or div? console.log("capturing form") }, true); div.addEventListener("focus", e => { // is intentional console.log("capturing div") }, true); p.addEventListener("focus", e => { // is intentional console.log("capturing p") }, true); 既不在p也不在div我有点击事件但是当我点击p或div时触发表单点击事件输出： capturing form 这是预期的行为吗？（我在 p 或 div 上没有点击处理程序，但是当我点击 form 或 div 时它会触发 p 中的点击）是的，为了阻止传播，您必须使用 Event.stopPropagation() 方法来阻止您的 div, p 元素传播事件。正如您在下面的代码片段中看到的，点击事件将从子元素传播到父元素。事件冒泡是click事件的预期行为。 let form = document.getElementById('form'); let div = document.getElementById('div'); let p = document.getElementById('p'); form.addEventListener("click", e => { console.log("capturing form click event") }, true); div.addEventListener("click", e => { console.log("capturing div click event") }, true); p.addEventListener("click", e => { console.log("capturing p click event") }, true); <form id="form" tabind>FORM <div id="div" style="background-color: aqua;">DIV <p id="p" style="background-color: blue;">P</p> </div> </form>

javascript dom dom-events event-propagation

回答 2 投票 0

dom-events 相关问题

最新问题