Как заставить кнопку снова запускать функцию после того, как окно возьмет на себя управление ею

dispaas

Привет, ребята,

Я сделал простой переключатель на JavaScript, но меня поразило, как заставить кнопку запускать функцию каждый раз, когда вы нажимаете на нее.

Я не знаю, как это объяснить.

Но взгляните на код и скажите, как добиться желаемого результата.

(«Если вам лень писать с нуля, то код вполне работоспособен»)

 


<!DOCTYPE html>


<html><head>


<style>


div { background: red; display: none; padding: 20px 10px; }


</style>


</head><body>


<input type=button id=button value="Click Me" /><br/><br/>


<div>


<input type=text placeholder="Введите сюда..." />


</div>


<script>


var d = document.getElementsByTagName('div')


, b = document.getElementById('button');


b.addEventListener('click', () => {


(d[0].style.display !== 'block') ? d[0].style.display = 'block' : d[0].style.display = 'none';


});


d[0].addEventListener('mouseup', (e) => {


e.stopPropagation();


});


window.addEventListener('mouseup', () => {


d[0].style.display = 'none';


});


</script>


</body></html>

Код (разметка): Спасибо,

Alex.1

Не уверен, чего вы хотите достичь, но вы можете просто отключить кнопку, чтобы она не сработала; с b.disabled = true; и b.disabled = ложь; чтобы включить его снова. Я предполагаю, что вы хотите:

 <!DOCTYPE html>


<html><head>


<style>


div { background: red; display: none; padding: 20px 10px; }


</style>


</head><body>


<input type=button id=button value="Click Me" /><br/><br/>


<div>


<input type=text placeholder="Введите сюда..." />


</div>


<script>


var d = document.getElementsByTagName('div')


, b = document.getElementById('button');


b.addEventListener('click', () => {


(d[0].style.display !== 'block') ? d[0].style.display = 'block' : d[0].style.display = 'none';


b.disabled = true;


});


d[0].addEventListener('mouseup', (e) => {


e.stopPropagation();


});


window.addEventListener('mouseup', () => {


d[0].style.display = 'none';


b.disabled = false;


});


</script>


</body></html>

HTML:

amele4

Вы имеете в виду что-то вроде этого?
http://jsfiddle.net/tZPg4/16861/

или
http://jsfiddle.net/mlotfi/43gyzepo/

Хотя это в jquery.

paapasha87

Спасибо, Не совсем. Я имею в виду, что хочу сделать то же самое, что в меню Твиттера. Посмотрите и попробуйте. Многие веб-сайты имеют эту функцию. Если я не могу сделать это сам, мне придется одолжить у кого-нибудь. Я давно не использую jQuery и почти все о нем забыл.

hermesconrad

Привет. Он (пост №1) конечно переключается, но только клавишей или на кнопке. Не щелчком мыши, из-за последней части:

 () => {}

Код (JavaScript): Хм, странный кодировщик. Я не знал, что мы можем заменить

 function(){}

Код (JavaScript): со следующим синтаксисом:

 window.addEventListener('mouseup', () => { d[0].style.display = 'none'; });

Код (JavaScript):

Похожие темы	Дата
[линда.ком] Jquery. Основной Треннинг	19.10.2024, 18:10
[frontendmasters.com, Will Sentance] JavaScript: The Hard Parts, v2 (ENG) (2020)	19.10.2024, 18:10
MsAgent JavaScript Editor скачать	19.10.2024, 18:10
Комплексное Обучение Javascript - Loftschool (2016)	19.10.2024, 18:10
[шп] Javascript Жариков Препод	19.10.2024, 18:10
e-World Tech DB AppMaker (Android, iOS, MSWindows, JavaScript technology)	19.10.2024, 18:10
«специалист Javascript » (комплексная Программа)	19.10.2024, 18:10
Почему мой скрипт работает очень медленно в overmouse?	19.10.2024, 18:10
Редактировать панель навигации	19.10.2024, 18:10
Разве использование float для денег не важно только для сайта электронной коммерции?	19.10.2024, 18:10

Как заставить кнопку снова запускать функцию после того, как окно возьмет на себя управление ею

dispaas

Alex.1

amele4

paapasha87

hermesconrad

I AM

Интересно