How to disable a function already enabled, or vice versa?

Question

How to disable a function already enabled, or vice versa?

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

How can I disable a function?

For example: in this case I'm activating a function (zoom in an image) with two clicks. I want to disable this function (zooming) when I move the mouse over the image. The event 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.br" />
        </map>
        <script>
            function zoomInside() {
                $("#zoom_01").elevateZoom({
                    zoomWindowFadeIn: 500,
                    zoomWindowFadeOut: 500,
                    lensFadeIn: 500,
                    lensFadeOut: 500
                })}     
        </script>
    </div>
</body>
</html>

javascript

asked by anonymous 17.04.2017 / 16:53

2 answers

AJAX javascript, PHP post does not work [closed] If inside if inside while while inside (slow)

score 3 · Answer 1

You have to make the function itself remove this ondblclick .

Tip: pass this as 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>

score 0 · Answer 2

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');
  })