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

9 浏览
0 Comments

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.

....

0
0 Comments

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中超链接回调函数问题的一些方法。根据不同的需求和浏览器兼容性,我们可以选择合适的方法来实现预期的功能。

0
0 Comments

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整体上都是冒犯的。所以一切都好,哈哈。

0