如何给图片加click事件 jquery代码

如何给图片加click事件 jquery代码,第1张

首先要给图片添加一个Id,之后在jquery中写如下代码:

$("#图片ID").click(function(){

alert("aa”)

})

或者

$("#图片ID").bind("click",function(){

alert("aa")

})

扩展资料:

Click 事件实际应用:

此事件是在一个对象上按下然后释放一个鼠标按钮时发生。它也会发生在一个控件的值改变时。

对一个 Form 对象来说,该事件是在单击一个空白区或一个无效控件时发生。对一个控件来说,这类事件的发生是当: 用鼠标的左键或右键单击一个控件。对 CheckBox, CommandButton, Listbox 或 OptionButton 控件来说,Click 事件仅当单击鼠标左键时发生。

通过按下箭头键或者单击鼠标按钮,对 ComboBox 或 ListBox 控件中的项目进行选择。

当 CommandButton,OptionButton 或 CheckBox 控件具有焦点时,按下 SPACEBAR 键。

当窗体带有其 Default 属性设置为 True 的 CommandButton 控件时,按下 ENTER 键。

当窗体带有一个 Cancel 按钮 — 其 Cancel 属性设置为 True 的 CommandButton 控件时,按下 ESC 键。

对控件按下一个访问键。例如,如果一个 CommandButton 控件的标题是 "&Go",则按下 ALT+G 键可触发该事件。 也可在代码中触发 Click 事件,通过: 将一个 CommandButton 控件的 Value 属性设置为 True。

将一个 OptionButton 控件的 Value 属性设置为 True。

改变一个 CheckBox 控件的 Value 属性的设置。

参考资料来源:百度百科:Click事件

点击事件只能设置在html元素中,所以background是没有办法设置点击的。但是,它的元素div是有点击事件onclick的。如果div设置onclick无效,建议使用jquery来绑定div的click事件。

此外,由于div中还有其它元素有click事件,所以,这就涉及到了事件冒泡的问题。

那么,说到这,指出你的一个代码问题。网页中,html元素的id必须是唯一的。如果id不唯一,一代涉及id,程序可能会出错。而class才是可以重复的。

可以如下纠正:

<input type="submit" name="button" id="btn_searc" value=" " class="button">

<input type="button" name="button" id="btn_ask" value=" " class="button" >

下面就是解决事件冒泡问题了,还是建议jquery来解决

对于div的内层元素,我们使用jquery来绑定它的单击事件,并且静止响应div的单击事件

$('#btn_searc').blind('click',function(event){

searchPost() //这里响应id为btn_searc元素的单击事件

event.stopPropagation() //这局话就是停止事件冒泡了,也就是说,接下来的div的单击事件将不再会被响应。

})

同理,另外一个原色的单击事件可以如下

$('#btn_ask').blind('click',function(event){

ask()

event.stopPropagation()

})

那么,接下来就是去绑定div的单击事件,首先,还是将div的class改成id,并保证其唯一性。同时,css也要改成id的选择器:

#communion_header{

height: 88px

width: 690px

margin: 0 auto

background: url(../../images/communicate/communtion_logo.png) no-repeat 50px 30px

padding: 40px 0 0 270px

}

jquery绑定click

$('#communion_header').click(function(){

//这里写div的单击代码。可以使用JavaScript,更可以使用其进阶语言jQuery

})

最后,需要说明的是,代码使用的是JavaScript语言的一种进阶语言jQuery。它的使用要借助于jQuery库的存在。所以你必须去下载个jquery.js,并且在网页中添加关联。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11889473.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-19
下一篇2023-05-19

发表评论

登录后才能评论

评论列表(0条)

    保存