onmousedownが再び実行されるのを止めるにはどうすればいいですか

私は、特定のdiv内のクリックの位置で次のクリック時にそれぞれイメージを追加する一連のボタンを持っています。しかし、私はボタンをクリックした後、別のボタンを押すまで、クリックするたびに画像が追加されるという問題に直面しています。どうすればボタンをクリックするだけでonmousedown関数を呼び出すことができますか？ここでonmousedownが再び実行されるのを止めるにはどうすればいいですか

は私が持っているものです。

function makeSnow() { 
 
    document.body.style.backgroundColor = "red"; 
 
    document.getElementById("canvas").onmousedown = function() { 
 
    var x = event.clientX; 
 
    var y = event.clientY; 
 
    var pic = document.getElementById("snowballAppear"); 
 
    pic.style.display = ''; 
 
    pic.style.position = 'absolute'; 
 
    pic.style.left = x - 50 + 'px'; 
 
    pic.style.top = y - 50 + 'px'; 
 
    document.body.style.backgroundColor = 'blue'; 
 
    }; 
 
}; 
 

 
function makeCat() { 
 
    document.body.style.backgroundColor = "red"; 
 
    document.getElementById("canvas").onmousedown = function() { 
 
    var x = event.clientX; 
 
    var y = event.clientY; 
 
    var pic = document.getElementById("catAppear"); 
 
    pic.style.display = ''; 
 
    pic.style.position = 'absolute'; 
 
    pic.style.left = x - 50 + 'px'; 
 
    pic.style.top = y - 50 + 'px'; 
 
    document.body.style.backgroundColor = 'blue'; 
 
    }; 
 
}; 
 

 
function makeDog() { 
 
    document.body.style.backgroundColor = "red"; 
 
    document.getElementById("canvas").onmousedown = function() { 
 
    var x = event.clientX; 
 
    var y = event.clientY; 
 
    var pic = document.getElementById("dogAppear"); 
 
    pic.style.display = ''; 
 
    pic.style.position = 'absolute'; 
 
    pic.style.left = x - 50 + 'px'; 
 
    pic.style.top = y - 50 + 'px'; 
 
    document.body.style.backgroundColor = 'blue'; 
 
    }; 
 
};

<div id="container" class "container"> 
 
    <div id='canvas' style="background-color: green; width: 300px; height: 300px;"> 
 
    </div> 
 
    <ul> 
 
    <button onClick="makeSnow()"> 
 
    <li>snow</li> 
 
    </button> 
 
    <button onClick="makeCat()"> 
 
    <li>cat</li> 
 
    </button> 
 
    <button onClick="makeDog()"> 
 
    <li>dog</li> 
 
    </button> 
 
    </ul> 
 
    <div class "picture"> 
 
    <img alt="snowballAppear" id="snowballAppear" style="display: none; width: 100px; height: 100px;" src="http://vignette3.wikia.nocookie.net/pottermore/images/9/99/Snowball-lrg.png/revision/latest?cb=20130412122815" /> 
 
    </div> 
 
    <div class "picture"> 
 
    <img alt="catAppear" id="catAppear" style="display: none; width: 100px; height: 100px;" src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?h=350&auto=compress&cs=tinysrgb" /> 
 
    </div> 
 
    <div class "picture"> 
 
    <img alt="dogAppear" id="dogAppear" style="display: none; width: 100px; height: 100px;" src="https://images.pexels.com/photos/39317/chihuahua-dog-puppy-cute-39317.jpeg?h=350&auto=compress&cs=tinysrgb" /> 
 
    </div> 
 
</div>

出典

2017-11-03 saln

ボタンをクリックした後は無効にしますか？ – Andy

要素にイベントをバインドするには、3つの方法があります。ですJavaScriptでは、最近嫌われている古いファッションスパゲッティスタイル、それほど悪くないが実際には良い習慣ではないプロパティの影響を持つ中間スタイル、そしてaddEventListenerを使用しているトレンディなスタイルがあります。

旧fashionnedスパゲッティスタイル：

var btn = document.getElementById("btn"); 
 

 
btn.onclick = sayHello; 
 

 
function sayHello() { 
 
    console.log("hello"); 
 
}

<button id="btn">Say hello</button>

：プロパティ気取りと

function sayHello() { 
 
    console.log("hello"); 
 
}

<button onclick="sayHello()">Say hello</button>

中級スタイルaddEventListener と

トレンディなスタイル：

var btn = document.getElementById("btn"); 
 

 
btn.addEventListener("click", sayHello); 
 

 
function sayHello() { 
 
    console.log("hello"); 
 
}

<button id="btn">Say hello</button>

最後の2つのスタイルは、HTML + JSのスープを避けます。これは、「邪魔されないJavaScript」（レスキューにWikipedia）を生成するのに役立つ優れた方法です。「ワンクリック、1枚の画像」の問題を解決するために今すぐ

var btn = document.getElementById("btn"); 
 

 
btn.addEventListener("click", sayHello); 
 
btn.addEventListener("click", sayGoodbye); 
 

 
function sayHello() { 
 
    console.log("hello"); 
 
} 
 

 
function sayGoodbye() { 
 
    console.log("goodbye"); 
 
}

<button id="btn">Say hello and goodbye</button>

：それは、複数のリスナーに対処することを容易にするという点で、それは言われて、第三のアプローチは、多くの場合、最良の選択肢でありますユーザーがボタンをクリックするたびにリスニングを停止する必要があります。これを行うには、onclickプロパティをリセットするか、removeEventListenerという新しい関数を使用します。両方のオプションするための一つのスニペット：

var btn = document.getElementById("btn"); 
 

 
btn.onclick = sayHello; 
 
btn.addEventListener("click", sayGoodbye); 
 

 
function sayHello() { 
 
    console.log("hello"); 
 
    btn.onclick = null; 
 
} 
 

 
function sayGoodbye() { 
 
    console.log("goodbye"); 
 
    btn.removeEventListener("click", sayGoodbye); 
 
}

<button id="btn">Say hello and goodbye once</button>

別の可能性はifの文と組み合わせるグローバル変数を使用することです。ないベストプラクティスが、私はそれがそれをmentionning価値があると信じて：

var shouldSayHello = false; 
 
var masterBtn = document.getElementById("master-btn"); 
 
var slaveBtn = document.getElementById("slave-btn"); 
 

 
masterBtn.onclick = unlock; 
 
slaveBtn.onclick = sayHello; 
 
slaveBtn.style.color = "gray"; 
 

 
function unlock() { 
 
    shouldSayHello = true; 
 
    slaveBtn.style.color = "black"; 
 
} 
 

 
function sayHello() { 
 
    if (shouldSayHello) { 
 
    console.log("hello"); 
 
    shouldSayHello = false; 
 
    slaveBtn.style.color = "gray"; 
 
    } 
 
}

<button id="master-btn">Unlock</button> 
 
<button id="slave-btn">Say hello once</button>

すべてこの最後に、実際の質問に答えます。

var catBtn = document.getElementById("cat-btn"); 
 

 
catBtn.addEventListener("click", prepareCatLanding); 
 

 
function prepareCatLanding() { 
 
    var canvas = document.getElementById("canvas"); 
 
    document.body.style.backgroundColor = "red"; 
 
    canvas.addEventListener("mousedown", appendCat); 
 
}; 
 

 
function appendCat() { 
 
    var x = event.clientX; 
 
    var y = event.clientY; 
 
    var src = document.getElementById("catAppear"); 
 
    this.removeEventListener("mousedown", appendCat); 
 
    pic = src.cloneNode(); 
 
    pic.id = ''; 
 
    pic.style.display = ''; 
 
    pic.style.position = 'absolute'; 
 
    pic.style.left = x - 50 + 'px'; 
 
    pic.style.top = y - 50 + 'px'; 
 
    src.parentNode.appendChild(pic); 
 
    document.body.style.backgroundColor = 'blue'; 
 
}

<div id="container" class="container"> 
 
    <ul> 
 
    <li><button id="cat-btn">cat</button></li> 
 
    </ul> 
 
    <div id="canvas" style="background-color: green; width: 300px; height: 300px;"> 
 
    </div> 
 
    <div class="picture"> 
 
    <img alt="catAppear" id="catAppear" style="display: none; width: 100px; height: 100px;" src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?h=350&auto=compress&cs=tinysrgb" /> 
 
    </div> 
 
</div>

私はしました：あなたは（私たちは唯一のデモのために猫を必要とする）キャンバスに複数の猫を追加するためにcloneNode機能付き隠し画像要素のクローンを作成する必要があることに注意してください途中でHTMLを修正しました。実際には、<ul>はリスト項目のみを受け入れるので、<button><li></li></button>は無効です。これは逆である必要があります。つまり、<li><button></button></li>です。さらに、class "container"はclass="container"である必要があります。

出典

2017-11-03 15:50:13 leaf

これは私がやっていることのうちの後の部分ですが、私はすでに理解しています。しかし、私は簡単にコードを削除しました。私はボタンを押すだけで1つの画像を追加できるようにしようとしています。次にボタンを押すと、別の画像を追加することができます。私は私の質問を編集します。 – saln

は、あなたがそれらを終了するには、あなたの関数でreturn;ステートメントを使用することができます。

出典

2017-11-03 15:35:24 Dario

私はその機能の中でそれを試み、それでも画像を追加します。 – saln

'onmousedown'関数の中か' makeSnow'関数の中に追加しましたか？ – Dario

これは機能を終了しますが、追加のモデムダウンが発生するのを止めません。それは私の質問に答えます。私は私の質問を明確にする必要があります。 – saln

イベントリスナーの終わりに、あなたは何もしない何か他のものにマウスダウンをリセットすることができます：

function makeSnow() { 
    document.body.style.backgroundColor = "red"; 
    document.getElementById("canvas").onmousedown = function() { 
    var x = event.clientX; 
    var y = event.clientY; 
    var pic = document.getElementById("catAppear"); 
    pic.style.display = ''; 
    pic.style.position = 'absolute'; 
    pic.style.left = x - 50 + 'px'; 
    pic.style.top = y - 50 + 'px'; 
    document.body.style.backgroundColor = 'blue'; 
    document.getElementById("canvas").onmousedown = function() { 
     //do nothing; 
    }; 
    }; 
};

およびその他の機能のために同じ。

出典

2017-11-03 15:36:22 dev8080

あなたの関数は、onmousedownイベントを*直接*空の関数に置き換えますが、onmousedownの関数が最初に呼び出された場合にのみ置き換えてください。だからこそ、私の答えを見てください。 –

それは正しかった、おかげで、私は全体の意味を変更したブレースを見逃していた。 – dev8080

-1

使用するようにしてください：あなたは画像が追加された直後に戻すことができ、各機能

出典

2017-11-03 15:38:36 Celebrombore

の終わりに

break;またはreturn;、お好みに条件を追加し、私はexaclyあなたの問題が何であるかわかりません。

if (some condition) return;

しかし、何も前に：

class "container"と、より多くのそれはあなたがHTML内のクラスを書く方法はないように、正しい表記はclass="name"

出典

2017-11-03 15:38:58 DanteTheSmith

あなたは、何もしない機能をで元onmousedownイベントリスナーをonmousedownイベントリスナーを交換する必要があります。このように：

function makeCat() { document.body.style.backgroundColor = "red"; document.getElementById("canvas").onmousedown = function() { ... document.getElementById("canvas").onmousedown =() => {}; }; };

出典

2017-11-03 15:52:49

受け入れ答えは働くだろうれるonmousedownイベントハンドラを、再定義することが提案されているが、余分なコードを記述する必要があります。ここでは、短いバージョンです）=）。

document.getElementById("canvas").onmousedown = null;

単純なイベントリスナのように思えますが、1回だけトリガするのも適切な解決策です。

document.getElementById("canvas").addEventListener("mousedown", functionToExecuteOnceEventOccurs, { once: true });

docs on MDNをご覧ください。しかし、ブラウザの互換性表に注意してください。 "一度"オプションは広くサポートされていません。

出典

2017-11-03 17:13:29

onmousedownが再び実行されるのを止めるにはどうすればいいですか

答えて

関連する問題