`
cuker919
  • 浏览: 97589 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

href="javascript:xxx(this);"和onclick="javascript:xxx(this);"的区别

 
阅读更多

href="javascript:xxx(this);"和onclick="javascript:xxx(this);"

一直以为这两种写法是等同的,今天在项目中使用时发现前者的this根本拿不到触发事件的A标签,而后者可以拿到

一般在做分页按钮时会用A标签来做,但是一般都会写<a href="#" onclick="turnPage(1,10)">之类的

href="#"会导致分页在跳转时页面先跳到当前页面顶部用户体验不好,所以一般推荐写成

<a href="javascript:void(0);" onclick="turnPage(1,10,this)">

甚至如果跳转的方法不需要拿到当前的A标签this的话,也可以直接写成

<a href="javascript:turnPage(1,10);" >



href='javascript:function()'和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐在href='javascript:function()' 这样的写法,因为 href 属性里面设置了js代码后,在某些浏览器下可能会引发其他不必要的事件。造成非预期效果。

而且 onclick事件会比 href属性先执行,所以会先触发 onclick 然后触发href,所以如果不想页面跳转,可以设置 onclick里面的js代码执行到最后返回一个false,这样 href 里面的东西就不会执行了。

在ajax应用程序中,多写着下面的这样 ,以表示这个链接不跳转,而执行一段js脚本。
<a href="javascript:void(0);" onclick="function()"></a>
或者 <a href="javascript:;" onclick="function()"></a>

void(0) 只是用来计算一个空值,其实也是什么事情都不做,而分号“;”则表示是一个空的js语句,这样就不会有任何其他跳转发生了,而且W3C标准不推荐在href里面执行javascript语句,所以还是用 onclick事件触发吧


分享到:
评论

相关推荐

    详解Html a标签中href和onclick用法、区别、优先级别

    2. **参数传递**:`onclick`可以传递`this`作为参数,允许在函数内部访问触发事件的元素,而`href="javascript:xxx()"`方式无法传递`this`。例如: ```html &lt;a href="javascript:void(0)" onclick="showElement...

    html提交图片

    &lt;INPUT type="image" height="19" width="53" src="xxx.gif" align="absMiddle" border="0" name="RedImg" onclick="this.form.submit()"&gt; ``` 此代码创建了一个点击后可以提交表单的图片按钮。其中 `src` 属性指定...

    JavaScript中一些常用的小技巧

    在JavaScript编程中,掌握一些常用的小技巧可以极大地提高开发效率和代码质量。以下是一些从网络上整合的实用技巧,特别适合初学者学习。 1. 事件源对象:`event.srcElement` 可以获取触发事件的元素,而 `event....

    javascript技巧大全

    ### JavaScript技巧大全 ... &lt;a href="javascript:void(0)" onclick="return false;"&gt;Link ``` 通过以上技巧的学习,开发者可以更加熟练地使用JavaScript来处理各种场景下的需求,提高开发效率和用户体验。

    javascript 代码大全

    JavaScript是Web开发中不可或缺的一部分,它提供了丰富的功能来操作网页元素和处理用户交互。这篇“JavaScript代码大全”详细讲解了JavaScript中的常用对象及其用法,下面将深入探讨这些知识点。 1. **事件源对象**...

    a标签href属性和onclick事件的比较介绍

    这个标签有两个主要属性:href和onclick。href属性用于指定链接的目标地址,而onclick属性则用于绑定一个事件处理器,当用户点击标签时会触发相应的JavaScript代码执行。理解这两个属性的使用场景和区别,对于前端...

    Javascript小技巧一箩筐

    标题和描述中提到的知识点包含了很多JavaScript编程中的高级技巧和实用方法,涵盖了事件处理、DOM操作、字符串处理、CSS操作等多个方面。以下是对给定内容中知识点的详细解释: 1. 事件处理: - `event.srcElement...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    javascript实用代码大全

    在本篇文章中,我们将详细介绍与JavaScript相关的实用代码片段和技术要点,这些内容将帮助开发者更好地理解和应用JavaScript中的各种特性。根据提供的文件信息,我们可以从中提炼出以下关键知识点: #### 1. 事件...

    图片做提交按钮和重置按钮编程技术

    &lt;input type="image" height="19" width="53" src="xxx.gif" align="absMiddle" border="0" name="RedImg" onClick="this.form.submit()"&gt; ``` - ```html &lt;input type="image" height="19" width="53" src="xxx....

    javascript小技巧.doc

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要在用户端浏览器运行,用于增加交互性和动态功能。以下是一些JavaScript的小技巧和常见用法: 1. **事件源对象**:`event.srcElement` 提供了触发...

    thymeleaf的th标签

    th:inline 标签用来定义 js 脚本可以使用变量,例如:&lt;script type="text/javascript" th:inline="javascript"&gt;... th:action th:action 标签用来表单提交的地址,例如:&lt;form action="subscribe....

    JS 大全 JS JS

    JavaScript(简称JS)是Web开发中的重要脚本语言,用于实现客户端交互和动态网页效果。在文档中,我们看到了很多关于JS操作的细节,这里将它们分门别类进行详细解释: 1. **事件处理**: - `event.srcElement.tag...

    JavaScript技巧大全(ie)

    JavaScript是Web开发中不可或缺的一部分,尤其在前端交互和动态效果实现方面起着核心作用。以下是一些关于JavaScript的实用技巧,特别关注与IE浏览器的兼容性: 1. **事件源对象**:`event.srcElement` 可以用来...

    javascript小技巧

    - `document.all.xxx.detachEvent('onclick', a)`:移除指定的事件监听器。 #### 浏览器功能 1. **插件检测**: - `navigator.plugins`:返回一个数组,包含浏览器中安装的所有插件的信息。 2. **类型检测**: ...

    JavaScript 技巧雜匯.pdf

    - **`document.all.xxx.detachEvent('onclick',a);`**:移除指定事件的监听器。 ##### 18. 插件数量 - **`navigator.plugins`**:获取浏览器安装的插件信息。 ##### 19. 获取变量类型 - **`typeof($js_libpath)=...

Global site tag (gtag.js) - Google Analytics