Довольно неожиданно. Я прочитал кучу ответов с людьми, имеющими аналогичную проблему. Я пробовал все предлагаемые решения (используя e.stopPropagation, используя e.stopImmediatePropagation, используя id вместо тега...), но ничего не получилось. Я развернул одну страницу html через firebase. Я написал сценарий непосредственно в html. Вот мой код:
function onclick(e) {
/*e.stopPropagation() and e.preventDefault() --YIELDD SAME RESULT*/
e.stopImmediatePropagation()
console.log("hello")
}
<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
<label>Email:</label>
<input name="email" type="email" placeholder="@">
<label>New Password:</label>
<input name="password" type="password">
<label>Confirm Password:</label>
<input name="second-password" type="password">
<button id="submit-button" type="button" onclick="onclick()">Update</button>
</form>
</div>
</body>
Желаемое поведение: при нажатии кнопка с идентификатором регистрирует сообщение в консоли devtools.
ps Я уверен, что есть основная ошибка, которую я делаю, но я не могу найти ее. Пожалуйста помоги!
onclick
- это имя общего свойства DOM. Когда функция с этим именем существует в глобальной области (как это делает ваш), она по существу становится свойством window
объекта и может перезаписывать глобальную. Вызовите свою функцию обратного вызова что-то еще или переместите ее из глобальной области, и она будет работать.
Кроме того, e.stopImmediatePropagation()
скорее всего не требуется для вашего случая использования.
Наконец, ничего не может произойти после </body>
кроме </html>
. Элементы <script>
разрешены в head
и body
, но не где-то еще.
<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
<label>Email:</label>
<input name="email" type="email" placeholder="@">
<label>New Password:</label>
<input name="password" type="password">
<label>Confirm Password:</label>
<input name="second-password" type="password">
<button id="submit-button" type="button" onclick="onclick1()">Update</button>
</form>
<script>
function onclick1(e) {
console.log("hello")
}
</script>
Теперь, поскольку вы просто изучаете все это, дайте убедиться, что вы сошли с правой ноги. Существует soooo очень плохой HTML и JavaScript, всплывающие вокруг, и вредные привычки все еще используются сегодня, потому что большинство людей не знают ничего лучшего, поэтому они просто копируют/вставляют код другого пользователя, который, кажется, работает.
Не используйте в первую очередь встроенные обработчики событий HTML (onclick
, onmouseover
и т.д.). Отделите свой JavaScript от своего HTML и следуйте современным, основанным на стандартах кодексу. Существует много причин не использовать встроенные обработчики событий HTML. Вместо этого используйте метод .addEventListener()
.
Далее, элемент <label>
является семантическим элементом, который работает одним из двух способов:
for
атрибута, который имеет значение, которое совпадает с полем формы, что это метка "для":
<label for="txtFirstName">First Name:</label>
<input id="txtFirstName">
<label>First Name: <input id="txtFirstName"></label>
В любом случае вы сообщаете клиенту, что существует связь между label
и полем формы, для которой она предназначена. Это позволяет пользователю щелкнуть или прикоснуться к метке и активировать поле формы. Это также очень полезно для тех, кто полагается на вспомогательные технологии (например, программы чтения с экрана) для использования Интернета.
Таким образом, все это вместе, ваш код переработал бы так (я добавил немного CSS, чтобы сделать страницу немного более чистой, чтобы смотреть, но ничего из этого не требуется):
label { display:block; width:200px; margin-bottom:.5em; }
button { margin-top: 1em; font-size:1.2em; padding:5px; }
<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
<label>Email: <input name="email" type="email" placeholder="@"></label>
<label>New Password: <input name="password" type="password"></label>
<label>Confirm Password: <input name="second-password" type="password"></label>
<button id="submit-button" type="button">Update</button>
</form>
<script>
// get a reference to the DOM element you want to work with
let btn = document.getElementById("submit-button");
// configure the event handler in JavaScript, not in HTML
btn.addEventListener("click", logToConsole);
// give your functions meaningful names
function logToConsole(e) {
console.log("hello")
}
</script>
Я думаю, что лучше всего изменить, какое событие останавливается, что похоже на форму. Непонятно, почему вы получаете проблему с диапазоном, но это должно сработать.
<!DOCTYPE html>
<html>
<body>
<form id="login-form" class="reset-form" >
<label>Email:</label>
<input name="email" type="email" placeholder="@">
<label>New Password:</label>
<input name="password" type="password">
<label>Confirm Password:</label>
<input name="second-password" type="password">
<input type="submit">Update</button>
</form>
<script>
document.getElementById("login-form").addEventListener("submit", function(event){
event.preventDefault();
alert('boogy');
});
</script>
</body>
</html>
<button id="submit-button" type="button" onclick="onclick()">Update</button>
вызывает бесконечный цикл. Вы переопределяете метод onclick
который в основном заставляет ваш код сказать: "Когда меня кликнут, нажмите меня" до бесконечности.
Измените имя function onclick()
на что-нибудь еще, например function hello()
и она будет работать.
Здесь вы можете играть с кодепином. https://codepen.io/anon/pen/mzajGd
Привет, Стив и добро пожаловать в переполнение стека.
Сначала разместите свою кнопку, есть несколько способов сделать это:
<button class="ui-btn" id="cmdHello">Push Me</button>
<a href="#" class="ui-btn" id="cmdHello2">Yet another Button</a>
Теперь отреагируйте на это Нажмите событие:
<script type="application/javascript">
$(document).bind("pageinit", function() {
$(document).on("click", "#cmdHello", function(evt) {
console.log("Hello World");
});
});
</script>
Это должно делать свое дело.