我想让这个链接有一个JavaScript对话框询问用户你确定吗? Y / N 。
< a href =delete.php?id = 22> Link< ; / A>如果用户点击是,链接应该加载,如果否则不会发生。
我知道如何在表单中使用 onclick 来运行一个返回 true 或 false 。但是,我该如何使用< a> 链接? h2>内联事件处理程序
以最简单的方式,您可以使用 confirm() 函数在内联 onclick 处理程序中。
< a href =delete.php?id = 22onclick =return confirm('Are you sure?')> Link< / A>高级事件处理
想要分开你的HTML和Javascript ,所以我建议你不要使用内联事件处理程序,但在你的链接上添加了一个类并添加了一个事件监听器。
< a href =delete.php? id = 22class =confirmation> Link< / a> ... < script type =text / javascript> var elems = document.getElementsByClassName('confirmation'); var confirmIt = function(e){ if(!confirm('Are you sure?'))e.preventDefault(); }; for(var i = 0,l = elems.length; i< l; i ++){ elems [i] .addEventListener('click',confirmIt,false); } < / script>这个例子 a>仅适用于现代浏览器(对于较老的IE,您可以使用 attachEvent(), returnValue 并提供一个实现对于 getElementsByClassName()或者使用像jQuery这样的库来帮助解决跨浏览器问题)。您可以阅读有关 MDN上的此高级事件处理方法的更多信息。
jQuery我想远离被认为是jQuery的粉丝,但是DOM操作和事件处理是两个有助于大多数与浏览器差异。为了好玩,下面是 jQuery 的样子:
< a href =delete.php?id = 22class =confirmation>连结< / a> ... <! - 包含jQuery - 请参阅jquery - > < script type =text / javascript> $('。'确认')。on('click',function(){ return confirm('Are you sure?'); }); < / script>
I want this link to have a JavaScript dialog that asks the user "Are you sure? Y/N".
<a href="delete.php?id=22">Link</a>If the user clicks "Yes", the link should load, if "No" nothing will happen.
I know how to do that in forms, using onclick running a function that returns true or false. But how do I do this with an <a> link?
解决方案Inline event handler
In the most simple way, you can use the confirm() function in an inline onclick handler.
<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>Advanced event handling
But normally you would like to separate your HTML and Javascript, so I suggest you don't use inline event handlers, but put a class on your link and add an event listener to it.
<a href="delete.php?id=22" class="confirmation">Link</a> ... <script type="text/javascript"> var elems = document.getElementsByClassName('confirmation'); var confirmIt = function (e) { if (!confirm('Are you sure?')) e.preventDefault(); }; for (var i = 0, l = elems.length; i < l; i++) { elems[i].addEventListener('click', confirmIt, false); } </script>This example will only work in modern browsers (for older IEs you can use attachEvent(), returnValue and provide an implementation for getElementsByClassName() or use a library like jQuery that will help with cross-browser issues). You can read more about this advanced event handling method on MDN.
jQueryI'd like to stay far away from being considered a jQuery fanboy, but DOM manipulation and event handling are two areas where it helps the most with browser differences. Just for fun, here is how this would look with jQuery:
<a href="delete.php?id=22" class="confirmation">Link</a> ... <!-- Include jQuery - see jquery --> <script type="text/javascript"> $('.confirmation').on('click', function () { return confirm('Are you sure?'); }); </script>
更多推荐
单击< a>时如何显示确认对话框链接?
发布评论