`
ihyperwin
  • 浏览: 436012 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

html a标签的href target onclick

 
阅读更多
在Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。

void 操作符用法格式如下:
1. javascript:void (expression)
2. javascript:void expression

expression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是选的,但是写上去是一个好习惯。 (实现版本 Navigator 3.0)

你以使用 void 操作符指定超级链接。表达式会被计算但是不会当前文档处装入任何内容。

下面的代码创建了一个超级链接,当用户以后不会发生任何事。当用户链接时,void(0) 计算为 0,但 Javascript 上没有任何效果。

<A HREF="javascript:void(0)">单此处什么也不会发生</A>

下面的代码创建了一个超级链接,用户单时会提交表单。

<A HREF="javascript:void(document.form.submit())">
单此处提交表单</A>

下面代码则执行了subgo()函数,

<a href="javascript:void(0)" onclick="subgo()">点我</a>

在这里,javascript:void(0),没启实质上的作用,它仅仅是一个死链接,执行的函数是subgo()。

<a href="#" onclick="subgo()">点我</a>与<a href="javascript:void(0)" onclick="subgo()">点我</a>区别。

实际上 #包含了一个位置信息默认的锚是#top 也就是网页的上端 ,而javascript:void(0) 仅仅表示一个死链接,没有任何信息。所以调用脚本的时候最好用void(0)

    href一般是指向一个URL地址,也可以调用javascript ,如href="javascript:xxx();",文档中推荐这样写:<a href=" javascript:void(0)" onclick="xxx();">xx</a>,但是这种方法在复杂环境有时会产生奇怪的问题,尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

    我们知道链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接),如果不想执行href 属性下的动作执行,onclick 需要要返回 false ,一般是这样写onclick="xxx();return false;".


——————————————————————————————————————————————————————————————
    <a href="javascript: dosomething();" > </a>

在chrome 中会执行dosomething(),没有任何问题,

在IE中会打开一个路径为javascript: dosomething();新窗口并报错

显然 这不是return false一类的问题

经过测试 我总结一下 href  javascript target onclick 执行顺序 浏览器兼容问题

<a onclick=”doclick();”  target=”_blank”  href=”javascript: dosomething();” > </a>

在我测试的所有浏览器中 onclick 总是优先执行

在chrome safari中, 如果href 中是javascript:语句 target 就被忽略

在ie firefox中, 先执行target 然后执行href , 换句话说 href 中的javascript 是基于 target的 context

就变成了 target.href

在本例中 就是在_blank窗口中执行 dosomething() 函数,新窗口是空窗口当然不会有这个函数的定义 所以会报错

流程是    先执行onclick 然后打开target 然后在target中执行dosomething()

用iframe的情况很明显

    <script>
    function did(){
    alert('current page');
    }

    function click(){
    alert('click');

    }
    </script>

    <a target="newframe" onclick="click();"  href="javascript: did();">点我1</a>

    <iframe id="newframe" name="newframe" src="test.html"></iframe>

    

以上代码在chrome, safari中 target 被忽略 先执行

alert('click')

然后

alert('current page');

在IE, firefox中 情况不一样

先执行

alert('click') 然后会执行newframe中的did()函数

所以target很重要 而且不可以在href中更改target 的值因为target会先于href执行

完全可以在onclick中控制 target 和href  因为onclick 是最优先执行的


分享到:
评论

相关推荐

    HTML a 标签.docx

    a 标签有两种用法:通过使用 href 属性,创建指向其他文档的链接;通过使用 name 或 id 属性,创建文档内部的书签。 属性 ------ a 标签有多种属性,以下是一些常见的属性: * href 属性:指定链接的目标 URL。 *...

    Js实现当前点击a标签变色突出显示其他a标签回复原色

    &lt;a href="#" onclick="changeCss(this)"&gt;链接2&lt;/a&gt; &lt;a href="#" onclick="changeCss(this)"&gt;链接3&lt;/a&gt; ``` 2. 编写changeCss函数,该函数遍历所有a标签,将它们的颜色设置为原始颜色,然后将被点击的a标签的颜色...

    A标签中通过href和onclick传递的this对象实现思路

    `href`属性本质上是用来定义链接的目标,它不是一个事件处理器,因此`this`不会像在`onclick`中那样自动指向`&lt;a&gt;`标签。在这个场景下,`this`将是全局对象,通常是`window`对象,而不是`&lt;a&gt;`标签。所以,当你试图...

    a 标签跳转

    &lt;a href="#section1"&gt;#section1是要跳转到的位置标签的id&lt;/a&gt; 这里是section1的内容。 ``` #### 三、其他常用属性 ##### 1. `download`属性 - **定义**:当用户点击链接时,浏览器会尝试下载目标文件而不是...

    A标签触发onclick事件而不跳转的多种解决方法

    &lt;a href="javascript:void(0)" target="mainFrame" class="STYLE4" onclick="del()"&gt;删除&lt;/a&gt; ``` 这种方法简单易用,但一些开发者认为它不那么语义化,并且可能导致浏览器的某些辅助功能出现问题。 4. **使用`...

    onclick锚点定位

    首先,HTML锚点是通过`&lt;a&gt;`标签的`href`属性与`#`符号结合使用的。`#`后面跟随的是一个ID,这个ID对应着页面上某个元素的`id`属性。例如: ```html &lt;a href="#section1"&gt;跳转到第一部分&lt;/a&gt; &lt;!-- 内容 --&gt; ``` ...

    HTML试题

    * 问题13:表示新开一个窗口的超链接代码是`&lt;a href=URL target=_blank&gt;..&lt;/a&gt;`。 * 问题14:`&lt;a href=URL target=_blank&gt;..&lt;/a&gt;`用于新开一个窗口的超链接。 * 问题15:`&lt;a href=URL target=_parent&gt;..&lt;/a&gt;`用于在...

    阻止 <a> 地址轉向

    在网页开发中,`&lt;a&gt;` 标签是用于创建超链接的重要元素,它通过 `href` 属性定义了链接的目标地址。然而,有时我们可能需要阻止 `&lt;a&gt;` 标签的默认行为,例如防止页面跳转或者在点击链接时执行特定的 JavaScript 代码...

    JavaScript实现获取用户单击body中所有A标签内容的方法

    如果目标元素不是A标签,但其父元素是A标签,我们同样可以获取到`href`属性。 ```javascript if (target.tagName == 'A') { href = target.href; } else if (target.tagName == 'SPAN') { href = target....

    html a标签-超链接中confirm方法使用介绍

    &lt;a href="target_url"&gt;链接文本&lt;/a&gt; ``` 在这里,`href`属性定义了链接的目标URL,而"链接文本"则是用户在网页上看到并可以点击的文本。 然而,如果我们想要在用户点击链接时先弹出一个确认对话框,我们可以利用...

    HTML笔记.pdf

    2. HTML标签: * 标题标签(h1-h6):用于表示标题的级别。 * 段落标签(p):用于表示一段文本。 * 链接标签(a):用于创建超链接。 * 图像标签(img):用于插入图像。 * 表格标签(table):用于创建表格。...

    ASP.Net电子商务网站后台模板

    &lt;li id="now1a"&gt;&lt;a title="标签管理" href="#" target="content3"&gt;标签管理&lt;/span&gt;&lt;/a&gt; &lt;li id="now1b"&gt;&lt;a title="模板管理" onclick="show_title('生成文件管理')" href="#" target="content3"&gt; 模板管理&lt;/span&gt;...

    html页面绘制热区工具

    4. **高级功能**:除了基本的链接功能,`&lt;area&gt;`标签还可以通过`alt`属性提供替代文本,`target`属性指定打开链接的新窗口或标签页,`title`属性为用户提供提示信息,`onclick`属性则可以绑定JavaScript函数。...

    前端笔记对方是否都是所发生的反倒是

    * A 标签:&lt;a href="跳转目标" target="目标窗口的弹出方式"&gt;文本或图像&lt;/a&gt; * Href 属性:指定链接目标的 URL 地址 * Target 属性:指定链接页面的打开方式 五、表格标签 * Table 标签: * Tr 标签: * Td 标签:...

    A样式小总结 经常要用到的A的样式

    &lt;a href="javascript:void(0)" onclick="alert('Hello!')"&gt;点击我&lt;/a&gt; ``` 5. **目标属性**: `target`属性用于指定打开链接的方式,如在新窗口或当前窗口: ```html &lt;a href=...

    HTML代码大全

    &lt;a href="相关地址" target="_blank"&gt;写上要写的字&lt;/a&gt; ``` 4. **消除连接下划线**:通过CSS样式`text-decoration:none`去除链接下划线。 ```html &lt;a href="相关地址" style="text-decoration:none"&gt;写上你想写...

    增强锚点:为html标签提供了一些增强功能

    &lt;a href="#" onclick="myFunction()"&gt;动态跳转&lt;/a&gt; function myFunction() { // 这里可以添加自定义的跳转逻辑 // ... window.location.href = "https://www.example.com"; } ``` 2. **AJAX请求**:...

    iframe框架中实现打开多窗口方法

    `target`属性是HTML中的`&lt;a&gt;`标签的一个属性,用于定义链接目标在何处打开。当`target`属性的值与某个框架或窗口的`name`属性相匹配时,链接内容将会在该框架或窗口中打开。例如,如果`target="main"`,那么链接将会...

Global site tag (gtag.js) - Google Analytics