Отмена функции при нажатии в другом месте, кроме целевого div

Question

Я внедряю инвентаризацию на своем веб-сайте, и я хочу немного усложнить ситуацию.

Для того, чтобы открыть ворота, вам необходимо найти болты. Когда вы его найдете, вам нужно нажать на болторезки, а затем на цепочку, чтобы сломать его, и это та часть, в которой я работаю. Но я хочу реализовать какую-то функцию, которая, если щелкнуть болторезки, щелкнуть где угодно, но в цепочке, я хочу запустить функцию, отменяющую функцию цепочки (изменение цвета) и отображение, например, «Cant use it here» msg.

Короче говоря, мне нужно найти решение, в котором (псевдокод):

If(boltcutters_clicked){ 
if(clicked_on_chain){ 
openthedoor()} 
else { 
cancelBoltcutters()} 

Вот часть кода у меня есть на данный момент, если тот помогает:

// цепь механики

var boltcutters_used = false; 
document.getElementById('item_boltcutters').onmousedown = function(){ 
    boltcutters_used = true; 
    document.getElementById('item_boltcutters').style.color = "red"; 
    document.getElementById('item_boltcutters').style.border = "1px solid red"; 
} 

var boltcutters_found = false; 
document.getElementById("chain").onmousedown = function(){ 
    if(boltcutters_used){ 
     alert('you open the door'); 
    } else if(!boltcutters_found){ 
     alert("I need to find something to break this chain...") 
    } else { 
     alert("Boltcutters could do the trick") 
    } 
} 

Благодарности к идее нижеперечисленным я придумал следующее решение :

var last_clicked = null; 
var test=0; 
window.onclick = function (e) { 
last_clicked = e.target; 

if(boltcutters_used == true){ 
    test++; 
} 
if(boltcutters_used == true && last_clicked !== document.getElementById("chain") && test >1){ 
    alert("Can't use it here"); 
    boltcutters_used = false; 
    test=0; 
} 

}

И это работает :)

Answer 1

Поддерживайте последний клик пункт

имеет переменный для хранения last clicked элемента

На window click обновлении значения, что переменная

Проверка этой переменной в обработчике события chain

var last_clicked = null; 
window.onclick = function (e) { 
    last_clicked = e.target; 
} 

var boltcutters_used = false; 
document.getElementById('item_boltcutters').onmousedown = function(){ 
    boltcutters_used = true; 
    document.getElementById('item_boltcutters').style.color = "red"; 
    document.getElementById('item_boltcutters').style.border = "1px solid red"; 
} 

var boltcutters_found = false; 
document.getElementById("chain").onmousedown = function(){ 
    if(boltcutters_used){ 
     if(last_clicked === document.getElementById("item_boltcutters")) { 
      alert('you open the door'); 
     } else { 
      alert("You should use the bolt cutters on this"); 
     } 
    } else if(!boltcutters_found){ 
     alert("I need to find something to break this chain...") 
    } else { 
     alert("Boltcutters could do the trick") 
    } 
}