如何防止单击时按钮移动？

debugcn 发表于 Dev

JustAnotherSimpleProgrammer__

我有以下代码：

<!DOCTYPE html>
<html>
<body>
<head>
<script>


function Show(element){
element.style.display = "block";
}


function Hide(element){
element.style.display = "none";
}


function Slide(){

try{

img1 = img1id.style.display;
img2 = img2id.style.display;
img3 = img3id.style.display;

if(img1 =="none" && img2=="none"){
Show(img1id);
Hide(img3id);
}

else if(img2 == "block" && img1=="none"){
Hide(img2id)
Show(img3id);
}

else if(img3 == "block" && img1 == "none" && img2 == "none"){
Show(img1id);
Hide(img3id);	
}

else {
Hide(img1id);
Hide(img3id);
Show(img2id);
}

}

catch(e){
alert("Evento " + e);

}

}


var img1id;
var img2id;
var img3id;
var buttonid;


function gestoreLoad(){
try{

img1id = document.getElementById("id1");
img2id = document.getElementById("id2");
img3id = document.getElementById("id3");
buttonid = document.getElementById("id4");
buttonid.onclick = Slide;

}
catch(e) {
alert("gestoreLoad " + e);
}
}

window.onload = gestoreLoad;
</script>
<style type="text/css">

button:active {
  padding: 0px;
}

button#id4 {
	margin: auto auto auto auto;
	font-weight: bold;
	height: 80px;
	width: 150px;
	background-color: #000;
	color: #FFF;
	border-radius: 20px 20px 20px 20px;
	font-size: 1.5em;
}


img {
	 -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
	</style>
</head>
<center>
<img id="id1" style="width:800px; height:400px;" src="https://image.shutterstock.com/image-photo/beatiful-nature-lake-forest-pang-260nw-1039096585.jpg" />
<img id="id2" style="display:none; width:800px; height:400px;" src="https://thumbs.dreamstime.com/b/fragment-traditional-iranian-architecture-against-beatiful-purple-sky-yellow-pink-clouds-beautiful-sunset-iranian-122642415.jpg" />
<img id="id3" style="display:none; width:800px; height:400px;" src="https://live.staticflickr.com/5808/21804482933_2b1279ef62_b.jpg" />
</center>

<br />
<center>
<button id="id4" /><span>Slideshow!</span></button>
</center>

</body>
</html>

我以互联网上的一些图像为例。顺便说一句，当我第一次单击按钮时（因此在页面加载后），它向上移动...您知道任何解决方案吗？

我在W3chools中知道的Ps可以完美地运行幻灯片显示的代码，但是我会自己尝试并进一步学习有关JavaScript的乐趣

Manjuboyz

这些是我观察到的事情：

您使用的按钮不正确，我也对此进行了修改。
您必须经过JavaScript基本编写的方法，这就是按钮首次闪烁的原因，为什么？这是因为，当第一次单击事件发生时，它总是处于最后else状态，并且使第一张图像处于隐藏状态，而此时按钮开始向上移动，其他按钮show()将图像移回其位置。现在，如果您考虑为什么第二次和第三次点击没有发生，那是因为第一张图片现在具有displayasnone或属性block。

第一次，第一张图片的显示属性始终是null您可以通过添加alert()了解来对其进行验证，因此，为了解决我所做的问题，因为您希望在页面加载期间显示第一张图片，因此，我已经使用display:block;了内联查询中的第一张图像，因此当您第一次单击按钮时，现在返回的block是属性而不是返回null值，因此它停止了按钮的上移。

我想您已经得到我想要传达的信息，如果没有，我们可以联系。

下面是工作代码（随意修改）

function Show(element) {
  element.style.display = "block";
}


function Hide(element) {
  element.style.display = "none";
}


function Slide() {

  try {

    img1 = img1id.style.display;
    img2 = img2id.style.display;
    img3 = img3id.style.display;

    if (img1 === "none" && img2 == "none") {
      Show(img1id);
      Hide(img3id);
    } else if (img2 == "block" && img1 == "none") {
      Hide(img2id)
      Show(img3id);
    } else if (img3 == "block" && img1 == "none" && img2 == "none") {
      alert("none");
      Show(img1id);
      Hide(img3id);
    } else {
      Hide(img1id);
      Hide(img3id);
      Show(img2id);
    }

  } catch (e) {
    alert("Evento " + e);

  }

}


var img1id;
var img2id;
var img3id;
var buttonid;


function gestoreLoad() {
  try {

    img1id = document.getElementById("id1");
    img2id = document.getElementById("id2");
    img3id = document.getElementById("id3");
    buttonid = document.getElementById("id4");
    buttonid.onclick = Slide;

  } catch (e) {
    alert("gestoreLoad " + e);
  }
}

window.onload = gestoreLoad;

button:active {
  padding: 0px;
}

button#id4 {
  margin: auto auto auto auto;
  font-weight: bold;
  height: 80px;
  width: 150px;
  border-radius: 20px 20px 20px 20px;
  background-color: #000;
  color: #FFF;
  font-size: 1.5em;
}

img {
  -webkit-animation: fadein 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s;
  /* Internet Explorer */
  -o-animation: fadein 2s;
  /* Opera < 12.1 */
  animation: fadein 2s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<center>
  <img id="id1" style="display:block; width:800px; height:400px;" src="https://image.shutterstock.com/image-photo/beatiful-nature-lake-forest-pang-260nw-1039096585.jpg" />
  <img id="id2" style="display:none; width:800px; height:400px;" src="https://thumbs.dreamstime.com/b/fragment-traditional-iranian-architecture-against-beatiful-purple-sky-yellow-pink-clouds-beautiful-sunset-iranian-122642415.jpg" />
  <img id="id3" style="display:none; width:800px; height:400px;" src="https://live.staticflickr.com/5808/21804482933_2b1279ef62_b.jpg" />
</center>
<br />
<center>
  <button id="id4" type="button">Slideshow!</button>
</center>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。