js冲突怎么解决?

JavaScript013

js冲突怎么解决?,第1张

jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,主要解决办法如下:

方法一:

<script type="text/javascript">jQuery.noConflict() //将变量$的控制权让渡给prototype.jsjQuery(function(){ //使用jQueryjQuery("p").click(function(){

alert( jQuery(this).text() )

})

})

$("pp").style.display = 'none' //使用prototype</script>

方法二:

<script type="text/javascript">var $j = jQuery.noConflict() //自定义一个比较短快捷方式$j(function(){ //使用jQuery$j("p").click(function(){

alert( $j(this).text() )

})

})

$("pp").style.display = 'none' //使用prototype</script>

方法三:

<script type="text/javascript">jQuery.noConflict() //将变量$的控制权让渡给prototype.js(function($){ //定义匿名函数并设置形参为$$(function(){ //匿名函数内部的$均为jQuery$("p").click(function(){ //继续使用 $ 方法alert($(this).text())

})

})

})(jQuery) //执行匿名函数且传递实参jQuery$("pp").style.display = 'none' //使用prototype</script>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

 <script src="js/jquery-1.4.2.min.js" type=text/javascript></script>

两个jquery库,删掉下面的,再有问题追问

在做表单验证时我们会经常遇到blur和click冲突的情况

举个栗子:

问题:当焦点在输入框时,点击取消按钮会触发blur和click事件,导致需要点击两次取消按钮才能关闭弹窗

原因:这是因为blur事件比click事件先触发,而 javascript为单线程,同一时间只能执行处理一个事件 ,所以当blur处理程序时,导致其后续click事件并不会执行

解决方案1:如果click事件比blur事件先触发就没有问题了,所以可以给blur事件延迟触发

解决方案2:将click事件改为mousedown事件,让其优先于blur事件执行(缺点是用户体验不好,鼠标按下便触发了事件)

解决方案3:给按钮添加一个mousedown事件,在其中执行event.preventDefault()阻止浏览器默认事件,这样点击按钮时输入框就不会失去焦点了