Question

我正在尝试添加缩小功能。当我点击屏幕上的任何地方时，它会缩小，但很快就会缩小。为什么它会像那样，即使我使用了 if 功能？

    <!DOCTYPE html>
    <html onclick="zoomOut()"> <!--zoom out added to html element-->
    <head>
    <script src="jquery.js"></script>
    <style>

    .pic{
        height:150px;
    }
    .picbig{
        position: absolute;
        width:0px;
        -webkit-transition:width 0.3s linear 0s;
        transition:width 0.3s linear 0s;
        z-index:10;
    }

    .picb
    {

        width:500px;
    }

    </style>
    </head>
    <body >

    <div id="edgetoedge">
    <img id="1" class="pic" src="numerouno.jpg"  onClick="zoom(this.id)">
    <img class="picbig" src="numerouno.jpg"  >

    <img id="2" class="pic" src="numerodue.jpg" alt="heart" onClick="zoom(this.id)">
    <img  class="picbig" src="numerodue.jpg" >

    <img id="3" class="pic" src="numerotre.jpg" alt="hardhat" onClick="zoom(this.id)">
    <img class="picbig" src="numerotre.jpg" >
    </div>

    <script>

    var x=1;

    function zoom(clicked_id)
    {
        $("#"+clicked_id).next().toggleClass("picb");
    }

这是zoomOut函数

function zoomOut()
    {alert("zooming out"); if ($("#edgetoedge img").hasClass( "picb" )) {$(".picbig").removeClass("picb");}}

其余代码不重要

Answer 1

通过添加event.stopPropagation（）解决;缩放功能

function zoom(clicked_id)
    {


            $("#"+clicked_id).next().toggleClass("picb");
        event.stopPropagation();



    }

为什么这个click事件会针对错误的元素触发？＆＃34;

1 个答案: