Question

我在容器内部有一个div（div id =＆＃34; x1＆＃34;），不执行使用我的doFunc分配给它的特定命令（）函数。如果我将div 放在容器之外，代码运行就好了。我想要做的就是制作一张＆＃34;缩小图片＆＃34;图像右上角的按钮（我使用CSS）。当用户点击图像时，它会变大，使用我的large（）函数，当用户点击X时，图片缩小并隐藏X div。当X div放在容器div中时，警报（＆＃34;我试过！＆＃34;）命令执行正常，但只有当X div位于容器div之外时才会执行resize命令（不是在我需要它的图像的右上角。）任何对HTML和JavaScript有更好了解的人，你能否向我解释一下我必须做些什么才能让这两行代码运行而不必抛弃我的＆＃34;点击X关闭＆＃34;想法？

document.getElementById(containerId).style.width="300px";
document.getElementById(xId).style.display="none";

HTML -

<div class="container" id="container1" onclick="large('container1','x1')">
<img src="icecream.jpg">
<div class="x" id="x1" onclick="doFunc('container1','x1')">X</div>
    </div>

的JavaScript -

function large(containerId, xId){
document.getElementById(containerId).style.width="600px";
document.getElementById(xId).style.display="block";
}
function doFunc(containerId, xId){
document.getElementById(containerId).style.width="300px";
document.getElementById(xId).style.display="none";
alert("I tried!");

Answer 1

请查看以下工作代码。

您遇到的问题是，只要点击div x1，事件就是冒泡到调用其onclick事件的父div container1 并增加宽度。因此，当您点击x1时，它会先调用 doFunc并减少宽度并由于事件冒泡父级获得onclick事件并触发large事件增加宽度再次。

因此，看起来没有任何反应。

通过使用e.stopPropagation()停止事件冒泡已在下面修复。

function large(containerId, xId){
document.getElementById(containerId).style.width="600px";
document.getElementById(xId).style.display="inline";
}
function doFunc(e, containerId, xId){
  e.stopPropagation();
  e.preventDefault();
document.getElementById(containerId).style.width="300px";
document.getElementById(xId).style.display="none";
//alert("I tried!");
  }

.container
{
  width: 300px; 
 }

.x {
 display: none; 
 cursor: pointer;
}

<div class="container" id="container1" onclick="large('container1','x1')">
<img width="100%" src="http://pisces.bbystatic.com//BestBuy_US/store/ee/2015/com/pm/nav_desktops_1115.jpg">
<div class="x" id="x1" onclick="doFunc(event, 'container1','x1')" style="float:right">X</div>
    </div>

Answer 2

那是因为当你把它放在容器div中时，div也会在你点击第二个函数时执行，你应该将函数放在一个不同的div中，在我的例子中我把它放在图像上。（只需替换图像）

＆＃13;

{{user.name}}

＆＃13;

function large(containerId, xId){
document.getElementById(containerId).style.width="600px";
document.getElementById(xId).style.display="block";
}
function doFunc(containerId, xId){
document.getElementById(containerId).style.width="300px";
document.getElementById(xId).style.display="none";
}

＆＃13;

容器div内的JavaScript div不会执行某些代码

2 个答案: