精华内容
下载资源
问答
  • a标签中onclick事件的用法

    万次阅读 2018-05-14 09:30:55
    有时候我们使用a标签,不希望用到a标签href去发送请求,因为可能需要再请求前做一些其他js操作,所以希望通过onclick事件触发请求,推荐使用<a href="javascript:void(0)" onclick="fn...

    有时候我们使用a标签,不希望用到a标签的href去发送请求,因为可能需要再请求前做一些其他的js操作,所以希望通过onclick事件触发请求,

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

    推荐使用:

    <a href="javascript:void(0)" οnclick="fn(this)"> 
    使用js将href属性禁掉, href="javascript:void(0)";

    问题:

    之前写a标签绑定onclick事件,href没有禁掉,写成href="#",出现onclick打开页面,然后返回的时候页面错误,报出405错误;

    这是因为直接点击a标签,会先执行onclick事件,然后再执行a标签的href;所以推荐在a标签上使用onclick事件的时候使用js禁掉href属性。

    展开全文
  • 本篇文章就给大家分享关于JavaScript中onclick事件的用法。web前端学习:打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)​zhuanlan.zhihu.com我们首先来看一下onclick...

    onclick是一个事件,当事件被触发时就会执行处理,onclick是一个处理鼠标点击的事件。本篇文章就给大家分享关于JavaScript中onclick事件的用法。

    web前端学习:打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)zhuanlan.zhihu.com

    016ec10879d04e080f2e04e214327dd6.png

    我们首先来看一下onclick事件的语法

    以下是如何使用onclick事件编写。

    使用document.getElementById()在文档中指定id元素,并使用function(){}处理单击该元素时发生的事件。

    document.getElementById("button").onclick = function() {
     // 设置在此处单击#button时要发生的事件
    };

    我们来看具体的示例

    以下是使用onclick事件的示例。

    单击按钮时更改文字

    HTML代码

    <div id="text-button"><p id="text">点击</p></div>

    CSS代码

    #text-button {
     display: block;
     cursor: pointer;
     width: 160px;
     text-align: center;
     border: 1px solid #232323;
    }

    JavaScript代码

    document.getElementById("text-button").onclick = function() {
    document.getElementById("text").innerHTML = "我点击了!";
    };

    浏览器上显示结果如下

    b2e0a100ccc90cf34c67cd26397446a5.png

    当点击这个方框后,就会显示如下效果:方框中文字改变了

    3be00ca7219dd95d6ab51d08bb001d2c.png

    点击方框时,方框背景颜色改变

    HTML代码

    <div id="square-button"></div>

    CSS代码

    #square-button {
     width: 80px;
     height: 80px;
     background: #232323;
    }
    #square-button.blue {
     background: #21759b;
    }

    JavaScript代码

    document.getElementById("square-button").onclick = function() {
     this.classList.toggle("blue");
    };

    浏览器上显示如下效果:是一个黑色的方框

    1b99c75b708328ab14dbd454e82ba5ba.png

    当点击这个方框后,颜色就会改变,显示效果如下

    ad9cbe4049a574956a5a029e82f590e0.png

    显示表单中输入的内容

    HTML代码

    <p>你叫什么名字?</p>
    <input type="text" id="name">
    <button type="button" id="form-button">输入</button>
    <div id="form-text"></div>

    CSS代码

    :focus {
     outline: 1px solid #666;
    }
    input[type="text"] {
     margin: 0 0 15px;
     padding: 8px 10px;
     border: 1px solid #d0d1d3;
    }
    button {
     padding: 8px 15px;
     background: #979380;
     color: #fff;
     border: none;
    }

    JavaScript代码

    document.getElementById("form-button").onclick = function() {
     document.getElementById("form-text").innerHTML = "你好 " + document.getElementById("name").value + " 同学!";
    }

    浏览器上显示效果如下

    b9208a915c3ad562311f28feae07114f.png

    当你在文本框中输入一个名字,比如张三,然后点击输入将会显示如下效果

    a6726766f5cc179832ce89071f368545.png

    本篇文章到这里就全部结束了,更多精彩内容大家可以关注我!!!!

    展开全文
  • 1.onclick是绑定事件...2.click方法(jquery中)作用是触发onclick事件,只要执行了元素click()方法,就会触发onclick事件。 click()方法主要作用是触发调用click方法元素onclick事件,实际上是模拟了鼠标...

    1.onclick是绑定的事件(它是一个事件),注意该事件绑定只是JacaScript中有(js中的),Jquery中并没有此事件,告诉浏览器在鼠标点击时候要做什么

    2.click方法(jquery中的)作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件。

    click()方法的主要作用是触发调用click方法元素onclick事件,实际上是模拟了鼠标的点击动作。此外,如果在click括号内定义了其他可执行语句,则click方法会在执行完onclick事件之后执行括号内部的语句。

    3.on方法(jquery中的),on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,on()方法提供绑定事件处理程序所需的所有功能。(动态绑定事件处理函数)

     

    转自:https://blog.csdn.net/longgejia/article/details/74277801

    展开全文
  • 1.链接 onclick 事件被先执行,其次是 href 属性下链接(页面跳转,或 javascript 伪链接); 2.假设链接中同时存在 href 与 onclick,如果想让 href 属性下动作不执行,onclick 必须得到一个 false 返回值...

    1.链接的 onclick 事件被先执行,其次是 href 属性下的链接(页面跳转,或 javascript 伪链接); 
    2.假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,onclick 必须得到一个 false 的返回值。不信,你可以将 goGoogle 函数中的 return false 注释掉; 
    3.如果页面过长有滚动条,且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);,而不要是 #,这可以防止不必要的页面跳动;
    4.如果在链接的 href 属性中调用一个有返回值的函数,当前页面的内容将被此函数的返回值代替; 

    5.F12中的console窗口当由一个页面切换到新的页面后会清屏;

    展开全文
  • 本篇文章就给大家分享关于JavaScript中onclick事件的用法。 我们首先来看一下onclick事件的语法 以下是如何使用onclick事件编写。 使用document.getElementById()在文档中指定id元素,并使用function(){}处理单击...
  • OnClick点击事件的用法(ListView)

    千次阅读 2016-07-12 22:21:41
    在使用ListView时候,一般都会为ListView添加一个响应事件android.widget.AdapterView.OnItemClickListener。 各项意义: arg1是当前itemview,通过它可以获得该项中各个组件。(例如arg1.textview....
  • onclick 事件

    2017-11-30 16:54:00
    onclick 事件 Event 对象 ...单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生。 语法 onclick="SomeJavaScriptCode" 参数描述 SomeJavaScriptCode 必...
  • 问题是这样的 我在某个class上加个onclick事件 由于逻辑关系 在触发某个事件的时候 class的onclick事件不可以触发 开始的思路就是把class去掉 但是发现这样是不可以解决问题的 代码如下: class为one的代码一直...
  • 首先说一下, href属性 和 onclick事件 执行顺序,当鼠标点击a标签时候会先执行 onclick事件, 然后才是 href 属性下动作(页面跳转,或 javascript 伪链接),如果不想执行href 属性下动作执行,onclick ...
  • JS onclick中this用法

    2019-10-06 22:47:21
    当在dom元素中使用onclick绑定事件的时候,可以使用this来指向该元素对象。 打印输出的内容为: 所以可以通过该this对象来获取子元素 //通过element获取该对象下的一个audio标签function play(1,element...
  • 本文实例讲述了vue基础之事件v-onclick=函数用法。分享给大家供大家参考,具体如下:v-on:click/mouseout/mouseover/dblclick/mousedown.....事件:v-on:click="函数"v-on:click/mouseout/mouseover/dblclick/...
  • 事件处理——基本用法-onClick & 阻止元素默认行为-e.preventDefault() & 关于事件函数this处理-使用箭头函数 & 给事件函数传递参数用法-onClick 事件绑定方式 // handle为函数名称 <button ...
  • 主要介绍了vue基础之事件v-onclick="函数"用法,结合实例形式分析了vue.js事件v-on:click="函数"data数据添加、点击响应、以及留言本功能相关操作技巧,需要朋友可以参考下
  • 在检查组内小伙伴提交tabToggler插件js代码时,发现了onclick的如下用法: el.onclick = function(){ //按钮样式切换 ...
  • onclick事件的定义和用法: 当点击对象的时候会触发此事件。 浏览器支持: 1.IE浏览器支持此事件。 2.火狐浏览器支持此事件。 3.Opera浏览器支持此事件。 4.谷歌浏览器支持此事件。 5.safria浏览器支持此事件。 实例...
  • 根据用户输入的开始日期和结束日期,用onclientclick事件判断是否结束日期大于开始日期,如果否的话,返回false,即可禁止onclick事件的发生。按钮加上事件:OnClientClick="return AlertInfo();" OnClick="btnEdit_...
  • a href onclick用法

    万次阅读 2012-11-02 17:37:04
    ⒈ 链接 onclick 事件被先执行,其次是 href 属性下动作(页面跳转,或 javascript 伪链接); ⒉ 假设链接中同时存在 href 与 onclick,如果想让 href 属性下动作不执行,onclick 必须得到一个 false ...
  • --给v-on绑定click事件声明一个方法--> @click= " chenges (index) " v-for= " list in list " > {{list. message }}-{{list. name }} </div> <!-- <!–v-for 使用和click简写方法--> v-if=...
  • 首先是资源的下载:fastclick.js 作为一个新手,插件原理什么的研究不透,看的也是似懂非懂的,网上有很多大牛写... 在这里我只是简单的记录下简单的用法,还请大牛们不吝赐教 为什么存在延迟? 从点击屏幕上...
  • onclick事件,也就是点击事件 <script type="text/javascript"> function openwin(){ window.open('http://www.imooc.com','_blank','height=600,width=400,top=100,toolbar=no,left=0,menubar=no,scro....
  • 点击 function testClick(t) {  alert("hello!"); } this是什么?即控件本身,可以通过它控件一些属性(如style、value等)。
  • React中事件的用法

    2018-08-13 11:51:35
    一、事件处理函数使用 鼠标事件onClick onContextMenu onDoubleClick onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onDrop onDrag onDragEnd ...
  • OnClick事件很简单,单击按钮时触发,不多说,也不解释,主要说说OnCommand事件的用法; 2、OnCommand事件 通过设置 CommandName 属性而具有与按钮关联的命令名(如“排序”)。这使您可以在 Web 窗体页上创建...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 351
精华内容 140
关键字:

onclick事件的用法