怎样给css样式里引入的图片添加点击事件

html-css07

怎样给css样式里引入的图片添加点击事件,第1张

点击事件只能设置在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,并且在网页中添加关联。

因为子元素在父元素的容器内。

给父层元素绑定事件,实际上已经包括了父层元素内的所有区域,所以也包括子元素,所以点击子元素会触发父元素的点击事件。

对于事件而言,这是一种事件传递。如果不希望事件传递下去,可以在子元素上使用js的阻止事件传递方法stopPropagation,就不会将事件传递到父层元素。

这个是事件冒泡!和css没啥关系,就是JS的事。

解决方案:

1.event.stopPropagation()

针对你的代码 大概是这样

obj.onmouseup=function(event){

    XXXXXXX

    event.stopPropagation()

}

事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)

2.return false

obj.onmouseup=function(){

    XXXXXXX

    return false

}

事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)

3.event.preventDefault() 

obj.onmouseup=function(event){

    XXXXXXX

    event.preventDefault()

}

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

以上部分摘自:网页链接