时间戳

首页 > 解决方案 > Onclick 功能仅显示一秒钟的内容

javascript - Onclick 功能仅显示一秒钟的内容

问题描述

我的 HTML 是这样的

         <figure>
          <a href="">
            <div onmouseover="trash_display(event,this);" onmouseout="trash_out(event,this);"  class="roomandtrash">
                <img src="Iconos/bathroom2.png" alt="Bathroom" class="icon" >
                <img src="Iconos/tacho.png" alt="Trash"  class="trash_icon" onclick="display_box(event,this);">
            </div>  

            <div class="box">
                <h4 class="Messagebox">You are about to delete this room and all its devices. 
                </h4>
                <img src="Iconos/confirm.png" alt="Confirm" class="confirm">
                <img src="Iconos/cancel.png" alt="Cancel" class="cancel">
            </div>
          </a>
          <figcaption>Bathroom</figcaption>
        </figure>

当用户单击垃圾图标时，“图标”类对象和“垃圾图标”对象应该消失，然后应该出现一个方形“框”。似乎有些问题，因为该框只出现一秒钟，然后上面提到的图标再次出现。

这里是 JS

function display_box(event, trash){

     var icon = trash.closest('div').querySelector('.icon');
     icon.style.display= "none";
     trash.visibility = "hidden";
     var box = trash.closest('a').querySelector('.box');
     box.style.display= "block";

}

标签： javascripthtml

解决方案

这是我的答案。我添加了 preventDefault 来取消<a>事件并稍微调整了代码。

function display_box(event, trash){

event.preventDefault();

  var icon = trash.closest('div').querySelector('.icon');
             icon.style.display= "none";
             trash.style.display= "none";

  var box = trash.closest('a').querySelector('.box');
      box.style.display= "block";

}

推荐阅读