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

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>

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

2dccksmb

Не уверен, чего вы хотите достичь, но вы можете просто отключить кнопку, чтобы она не сработала; с 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.

Sweabbent

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

Hermesconrad

Привет.

Он (пост №1) конечно переключается, но только клавишей или на кнопке.

Не щелчком мыши, из-за последней части:

 () => {}

Код (JavaScript): Хм, странный кодировщик.

Я не знал, что мы можем заменить

 function(){}

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

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

Код (JavaScript):

Похожие темы	Дата
[Udemy] Современный JavaScript Полный курс - Построим 10 проектов	19.12.2024, 05:12
[Loftschool] Курс по AngularJS	19.12.2024, 05:12
[нет] Сборник курсов AngularJS	19.12.2024, 05:12
[Udemy] Mark Tan - Создание Telegram ботов с помощью JavaScript: Полное руководство (2019)	19.12.2024, 05:12
[loftschool] Курс По Angularjs [2015.06]	19.12.2024, 05:12
проверка полей формы не работает	19.12.2024, 05:12
Помогите пожалуйста с лайтбоксом? (jquery)	19.12.2024, 05:12
Копирование текста из окна веб-сообщений/всплывающего окна	19.12.2024, 05:12
Закрытие iframe от родителя или дочернего элемента. Как?	19.12.2024, 05:12
Все еще не могу понять JS!! Какая цель??!!	19.12.2024, 05:12

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

Dispaas

2dccksmb

Amele4

Sweabbent

Hermesconrad

I AM

Интересно