以下是构建链接的两种方法,该链接的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面,哪个更好。?

函数myJsFunc(){警报(“myJsFunc”);}<a href=“#”onclick=“myJsFunc();”>运行JavaScript代码</a>

or

函数myJsFunc(){警报(“myJsFunc”);}运行javascript代码</a>


当前回答

您也可以在锚点中编写如下提示:

<a href="javascript:void('open popup image')" onclick="return f()">...</a>

因此用户将知道该链接的作用。

其他回答

第一个,最好是在用户禁用JavaScript的情况下使用一个真正的链接。只需确保返回false,以防止在JavaScript执行时触发单击事件。

<a href="#" onclick="myJsFunc(); return false;">Link</a>

如果您使用Angular2,则此方法有效:

<a[routerLink]=“”(单击)=“passTheSalt()”>单击我</a>。

请参见此处https://stackoverflow.com/a/45465728/2803344

我同意其他地方的建议,即应该在href属性中使用常规URL,然后在onclick中调用一些JavaScript函数。缺陷在于,它们在调用后自动添加return false。

这种方法的问题是,如果函数无法工作或出现任何问题,链接将变得不可点击。Onclick事件将始终返回false,因此不会调用正常的URL。

有一个非常简单的解决方案。如果函数工作正常,则返回true。然后使用返回的值确定是否应取消单击:

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

注意,我否定了doSomething()函数的结果。如果它有效,它将返回true,因此它将被否定(false),路径/to/some/URL将不会被调用。如果函数返回false(例如,浏览器不支持函数中使用的内容或其他任何错误),则将其否定为true,并调用路径/to/some/URL。

为了完全符合整体情绪,在需要时使用void(0),在需要的时候使用有效的URL。

使用URL重写,您可以禁用URL,这些URL不仅可以执行JavaScript所需的操作,还可以确切地告诉您它将要执行的操作。

<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>

在服务器端,您只需解析URL和查询字符串并执行所需的操作。如果您聪明,可以允许服务器端脚本以不同的方式响应Ajax和标准请求。允许您使用简洁的集中代码来处理页面上的所有链接。

URL重写教程

Pros

在状态栏中显示通过JavaScript中的onclick处理程序轻松升级到Ajax实际评论本身防止目录中充斥着一次性使用的HTML文件

Cons

在JavaScript中仍应使用event.prpreventDefault()服务器端的路径处理和URL解析相当复杂。

我相信还有很多罪犯。欢迎讨论。

如果您恰好使用AngularJS,可以使用以下选项:

<a href="">Do some fancy JavaScript</a>

这不会有任何作用。

此外

它不会像(#)那样将您带到页面顶部因此,您不需要使用JavaScript显式返回false它简短而简洁

4.0之前的引导模式有一个基本上未记录的行为,即它们将使用AJAX从元素加载href,除非它们正好是#。如果您使用的是Bootstrap 3,javascript:void(0);hrefs将导致javascript错误:

AJAX错误:错误GET javascript:void(0);

在这些情况下,您需要升级到引导程序4或更改href。