JavaScript - href vs onclick for callback function on Hyperlink JavaScript - href与onclick在超链接上的回调函数的比较 In JavaScript, there are two commonly used methods to add a callback function to a hyperlink: using the href attribute or the onclick attribute. 在Jav
JavaScript - href vs onclick for callback function on Hyperlink JavaScript - href与onclick在超链接上的回调函数的比较 In JavaScript, there are two commonly used methods to add a callback function to a hyperlink: using the href attribute or the onclick attribute. 在Jav
我想在单击时运行一个简单的JavaScript函数,而不进行任何重定向。在将JavaScript调用放在href属性中(如下所示)和将其放在onclick属性中(将其绑定到onclick事件)之间是否有任何区别或好处?
vs.
JavaScript中,我们可以通过href属性或onclick属性来为超链接添加回调函数。然而,这两种方法在不同的浏览器和点击方式下表现不同。下面是一些解决方法:
不推荐的方法:
link text
这种方法在所有浏览器中都可以正常工作,但是会导致浏览器跳转到一个新的URL。
推荐的方法:
link text
这种方法通过将href属性设置为"#"来防止浏览器跳转到新的URL。但是,一些浏览器仍然会在点击后滚动到页面顶部。
更好的方法:
link text
这种方法在点击后不会滚动到页面顶部,因为通过return false来阻止了浏览器跳转到新的URL。
更好的方法2:
link text
这种方法在点击后不会滚动到页面顶部,并且还添加了一个提示的title属性。
更好的方法3:
link text
这种方法与更好的方法2类似,但是在浏览器不支持JavaScript或JavaScript被关闭时,会将用户带到一个警告或解释页面。
最佳方法:
使用jQuery或其他类似的框架通过元素的ID来绑定onclick事件。
$('#myLink').click(function(){ MyFunction(); return false; });
这种方法是最佳的,因为它将事件绑定与执行逻辑分离开来。
还有一种最佳的解决方法,当href不是设置为"#"而是一个实际的链接时,用于无法使用JavaScript的浏览器。
以上是解决JavaScript中超链接回调函数问题的一些方法。根据不同的需求和浏览器兼容性,我们可以选择合适的方法来实现预期的功能。
JavaScript中的href与onclick用于超链接的回调函数的区别是什么?
在HTML中,一般来说,onclick是用于指定元素被点击时触发的JavaScript代码,而href是用于指定超链接的目标地址。然而,在一些特殊情况下,onclick也可以用于指定超链接的回调函数。
触发onclick事件时,会执行指定的JavaScript代码,而点击超链接时,会根据href属性的值跳转到相应的目标地址。因此,将回调函数放在onclick中的方式可以在点击超链接时执行特定的JavaScript代码,而不跳转到目标地址。
然而,将回调函数放在href中可能会违反一些开发者对内容与行为之间分离的强烈信念。他们认为HTML内容应该专注于内容本身,而不应包含任何关于展示或行为的内容。
目前,常见的做法是使用JavaScript库(如jQuery)创建事件处理程序。可以像下面这样使用jQuery创建一个事件处理程序:
$('a').click(function(e) { e.preventDefault(); /*your_code_here;*/ return false; });
如果不需要处理事件对象,使用纯JavaScript也是很简单的。可以使用document.getElementById()获取DOM节点,然后设置obj.onclick = foo。
但如果在弹出窗口中动态生成超链接,并且仍然需要特定的点击行为,那么如何保持内容的分离呢?
有人可能会问,这个问题不是在问将JS调用内联放在href中与放在onclick中的区别吗?假设出于某种原因要将其内联,应该使用哪种方式?(实际上,我会按照你建议的做法去做,但你好像跳过了这两种属性之间的区别。)
唯一一个我会主张在链接中内联函数调用而不是使用onclick事件的情况是,如果在页面中动态创建了多个调用相同函数的链接,但可能没有唯一的id。例如,我有一个Web表单,用户可以添加和删除项目,我将onclick放在动态创建的div中的链接的href属性中,这样我就可以更快地处理脚本,而不是使用相对id或类名这样的不太具体的方式。
对于强烈相信内容与行为/动作分离的观点,我非常不认同。遵循这一原则时,内容与行为之间的联系不明显。那么你如何知道具体的行为在哪里?现在你必须通过id或类进行搜索,这是一个问题。通常会有多个返回结果,你如何知道你要找的是哪个?你必须阅读所有代码才能弄清楚。这是非常低效的。现在将函数定义放在内容中是不好的,所以过分追求分离也是有问题的。
强烈信仰的副作用是思想与现实的分离。如果将内容与行为分开,就否定了静态链接与动态解析的概念。
作为一个强烈相信内容与行为/动作分离的人,我通常觉得HTML/CSS整体上都是冒犯的。所以一切都好,哈哈。
JavaScript中,onclick属性中的this关键字将指向其onclick属性所在的DOM元素(在这种情况下是元素),而href属性中的this将指向window对象。
在呈现方面,如果链接中缺少href属性(即),则默认情况下,浏览器将显示文本光标(而不是通常希望的指针光标),因为它将视为锚点而不是链接。
在行为方面,当通过href导航指定操作时,浏览器通常支持使用快捷方式或上下文菜单在新窗口中打开该href。但仅通过onclick指定操作时,这是不可能的。
然而,如果您想知道从DOM对象的点击事件中获取动态操作的最佳方法是什么,那么使用单独的javascript将事件附加到文档内容之外是最好的方法。您可以以多种方式实现这一点。一种常见的方法是使用像jQuery这样的javascript库绑定事件:
$('a#link').click(function(){ /* ... action ... */ })
感谢您确认"href"和"onclick"中的"this"是不同的。