How to disable an already enabled Function, or vice versa?

Asked

Viewed 1,174 times

0

How can I disable a function?

For example: in this case I am activating a function (zoom into an image) with two clicks. I want to disable this function (zoom) when taking the mouse off the image. The event in I already know (onmouseout) but I could not find a method to disable the type function: zooinside = disable or enable.

Code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-1.8.3.min.js"></script>
    <script src="../Scripts/jquery.elevatezoom.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <link href="../Content/Site.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top" height:"15%">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <img src="../Images/Other/LogoTransparente.png" width="14%" height="10%" class="img-logo" />
                        <li class="tbclassli">Inicio</li>
                        <li class="tbclassli">Contato</li>
                    </ul>
                </div>
            </div>
    </div>
    <div class="tb-background-image">
        <div class="tbclassindicador">
            <p class="palign">
                <b>Clique no setor para mais informações</b>
                <img src="../Images/Other/indicadorTransparente.png" width="2%" height="2%" />
            </p>
        </div>
       <img id="zoom_01" src="../Images/Small/Barracao.jpg" ondblclick="zoomInside()" usemap="#MeuMapa" data-zoom-image="../Images/Large/BarracaoGrande.jpg" />
        <map name="MeuMapa">
            <area shape="rect" alt="parte 1" coords="250,153,312,163" href="www.globo.com.br" />
            <area shape="rect" alt="parte 2" coords="1473,899,1821,954" href="www.google.com" />
        </map>
        <script>
            function zoomInside() {
                $("#zoom_01").elevateZoom({
                    zoomWindowFadeIn: 500,
                    zoomWindowFadeOut: 500,
                    lensFadeIn: 500,
                    lensFadeOut: 500
                })}     
        </script>
    </div>
</body>
</html>
javascript

  • Do you want it to be possible to only make two clicks once and never again? correct?

  • I want that when it is disabled the function, after you do dbclick, it execute the function, however, if it is already executed, after dbclick again, it disable the function, and so on

  • in case Function will be this zoonInside, it is because of the zoom, I want to enable and disable when you want, understand??

  • Did any of the answers solve your problem?

2 answers

3

You have to get the function itself to remove that ondblclick.

Suggestion: pass the this as an argument ondblclick="zoomInside(this)" and then in function:

function zoomInside(el) {
    $("#zoom_01").elevateZoom({
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500
    });
    el.removeAttribute('ondblclick');
}

Example:

function teste(el) {
  console.log(el.id, 'clicado');
  el.removeAttribute('ondblclick');
}
div {
  padding: 10px;
  user-select: none;
}
<div id="A" ondblclick="teste(this)">clica-me</div>
<div id="B" ondblclick="teste(this)">clica-me</div>

0

the ideal in this case would be to use as follows.

$(elemento)
  .on('mouseOver', function () {
    // ADICIONA O EVENTO QUANDO O MOUSE ESTA SOBRE O ELEMENTO
    $(this).on('dblclick', function () {
      // ZOOM IN FUNCTION HERE.. 
    })
  })
  .on('mouseLeave', function () {
    // REMOVE O EVENTO QUANDO O MOUSE SAI DO ELEMENTO
    $(this).off('dblclick');
  })

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.