js实现点击显示一个div,点击其他任何地方div消失,如何实现_框架

知道文本框都有blur事件吗？就是光标在闪的时候就处于焦点，当你点其他地方时，光标就没了，就会触发blur事件。你要做到当div显示时，让隐藏在div内的文本框处于焦点，点击其他地方时，文本框的焦点自然会消失，blur事件把当前div隐藏。

!!注意: 当点击显示的div时要用脚本处理div中的隐藏文本框处于焦点

可以用jquery 脚本框架，方便，浏览器的兼容性好

写jquery吧

假设你要设为焦点的id为yyy，例如<input type='text' id='yyy' />

然后在页面里先引入Jquery，然后自定义函数

$(function(){

yyyfocus();

});

</script>

获取焦点事件，应该满足不了这个要求吧，试试我这个吧：

js:

documentonclick = function(){

if(documentactiveElementid=='single'){

documentactiveElementstyledisplay ="none";

//控制别的div的也可以在此延伸

}

html：

</div>

<hr>

</div>

需要注意虽然focus与blur不冒泡，但是却可以在捕获阶段侦听到它们。

只定义了div2即棕色的那个div的事件

解释enter与leave：当鼠标由粉移向棕色时，显示enter，鼠标由棕移向绿时，不显示leave与enter。当移出粉色时，显示leave。

解释over与out：当鼠标由粉移向棕色时，显示over，鼠标由棕移向绿时，显示out在显示over，鼠标由绿移向棕时，显示out载显示over。为什么会显示呢？是因为事件冒泡，由棕移向绿时会触发div3的over事件，但是div3并没有定义，所以向上冒泡到div2。所以会显示div2的over事件。

总结mouseenter与mouseleave是IE提出的事件，不冒泡。但是mouseover与mouseout事件则通过简单的estopPropagation()也无法避免冒泡的现象。

<head>

body,ul,li{margin:0;padding:0}

ul{list-style:none;}

slide{

width:500px;

height:100px;

border:1px solid #ddd;

margin:20px auto 0;

position:relative;

overflow:hidden;

}

slide ul{

position:absolute;/相对于slide进行绝对定位/

width:1000px;/比slide宽度大一倍，做这种连续滚动效果的时候，要在后面把内容复制一份/

height:100px;

left:0;/可以改变该值让其动起来/

top:0;

}

slide ul li{

width:90px;

height:90px;

margin:5px;

background-color:#ccc;

line-height:90px;

text-align: center;

font-size:30px;

float:left;

}

btns{

width:500px;

height:50px;

margin:10px auto 0;

}

</style>

$(function(){

var $ul = $('#slide ul');

var left = 0;

var deraction = 2;//每次滚动的距离

//内容为两套li

$ulhtml($ulhtml() + $ulhtml());

//反复循环定时器，30ms动一下可以看起来比较平滑

var timer = setInterval(move, 30);

function move(){

left -= deraction;

//当第2套li完全显示出来的时候，整个移回原点重新移动，实现向左连续滚动

if(left < -500){

left = 0;

}

//瞬间跳回，实现向右连续滚动

if(left > 0){

left = -500;

}

$ulcss({left: left});

}

$('#btn1')click(function() {

deraction = 2;

});

$('#btn2')click(function() {

deraction = -2;

});

$('#slide')mouseover(function() {

clearInterval(timer);

});

$('#slide')mouseout(function() {

timer = setInterval(move,30);

});

})

</script>

</head>

<body>

</div>

<ul>

</ul>

</div>

</body>

鼠标移入要做的事情mouseover

鼠标移出要做的事情mouseout

<head>

<title>鼠标移入移出</title>

box{

width: 200px;

height: 200px;

background-color: gold;

margin: 100px auto 0;

}

son{

width: 100px;

height: 100px;

background-color: green;

}

</style>

$(function(){

/进入子元素也触发/

/$('#div1')mouseover(function() {

$(this)animate({marginTop: 50});//stop()

});

$('#div1')mouseout(function() {

$(this)animate({marginTop: 100});//stop()

});/

/进入子元素不触发/

/$('#div1')mouseenter(function() {

$(this)stop()animate({marginTop: 50});//

});

$('#div1')mouseleave(function() {

$(this)stop()animate({marginTop: 100});//

});/

/通过hover（mouseenter+mouseleave）实现简写/

$('#div1')hover(function() {

$(this)stop()animate({marginTop: 50});

}, function() {

$(this)stop()animate({marginTop: 100});

});

})

</script>

</head>

<body>

</div>

</body>

创建一个子元素促使鼠标移入到子元素才能移动

是由于时间mouse影响

则要使用mouseenter和mouseleave进行改变

也可以运用hover简化

autofocus

表单元素的值发生变化

<head>

<title>input框事件</title>

</style>

$(function(){

// //一开始就获取焦点，相当于设置了autofocus自动获取焦点了（HTML5 新增表单控件属性）

// $('#txt01')focus();

// //文本框获取焦点的时候（有光标闪烁的时候）

// $('#txt01')focus(function() {

// alert('focus');

// });

// //失去焦点的时候（光标离开的时候）

// $('#txt01')blur(function() {

// alert('blur');

// });

// //输入框内容发生变化的时候，失去焦点后触发，可用于注册时验证用户名是否已存在

// $('#txt01')change(function() {

// alert('change');

// });

//松开键盘按键就触发

$('#txt01')keyup(function() {

alert('keyup');

});

})

</script>

</head>

<body>

</body>

<head>

<title>jQuery其他事件</title>

</style>

// // JS原生写法

// windowonload = function(){

// }

// / /jQuery写法，等同于上面写法

// $(window)load(function(){

// })

// //ready的写法

// $(document)ready(function(){

// })

// //ready的简写

// $(function(){

// })

// 窗口改变尺寸的时候，会高频触发

$(window)resize(function() {

consolelog('3');

});

</script>

</head>

<body>

</body>

鼠标移入要做的事情mouseover

鼠标移出要做的事情mouseout

你可以这样做。

1、利用你的div，给它添加runat="server"属性，然后让这个div的id都唯一，这个应该不难做大吧。

<div id='div<%= i %>'>类似这样

2、你不是会有OnItemCommand事件么，在这个事件里就可以找到这个div。我写下伪代码：

protected void repeater_OnItemCommand(object sender, e){

div = eControls[0] as HtmlControl;

textbox = eControls[1] as TextBox;

if(div != null)

divAttributesAdd("data", textboxClientID);

}

3、在你的客户端，用js获取div的data属性，就可以获取到textbox在客户端的id了

1给用作富文本编辑的div添加contenteditable属性。

2给表情添加click事件（我是把img表情放在li下的），div获取焦点，_insertimg()锁定编辑器中光标的位置，参数是img，也可以是文本。

$("#Modal emoji-list li")click(function(event) {

var emoji = $(this)find("img")attr('src');

$("#editor")focus();

var source = '<img src="'+emoji+'">';

_insertimg(source);

});

function _insertimg(str){

var selection= windowgetSelection windowgetSelection() : documentselection;

var range= selectioncreateRange selectioncreateRange() : selectiongetRangeAt(0);

if (!windowgetSelection){

documentgetElementById('editor')focus();

var selection= windowgetSelection windowgetSelection() : documentselection;

var range= selectioncreateRange selectioncreateRange() : selectiongetRangeAt(0);

rangepasteHTML(str);

rangecollapse(false);

rangeselect();

}

else{

documentgetElementById('editor')focus();

rangecollapse(false);

var hasR = rangecreateContextualFragment(str);

var hasR_lastChild = hasRlastChild;

while (hasR_lastChild && hasR_lastChildnodeNametoLowerCase() == "br" && hasR_lastChildpreviousSibling && hasR_lastChildpreviousSiblingnodeNametoLowerCase() == "br") {

var e = hasR_lastChild;

hasR_lastChild = hasR_lastChildpreviousSibling;

hasRremoveChild(e)

}

rangeinsertNode(hasR);

if (hasR_lastChild) {

rangesetEndAfter(hasR_lastChild);

rangesetStartAfter(hasR_lastChild)

}

selectionremoveAllRanges();

selectionaddRange(range)

}

以上就是关于js实现点击显示一个div,点击其他任何地方div消失,如何实现全部的内容，包括:js实现点击显示一个div,点击其他任何地方div消失,如何实现、在css样式中能不能直接设定某个元素获得焦点如一个<div>在页面加载完之后焦点就在他上面、点击jsd出div层，当鼠标移出div层窗口后任意点击关闭div层窗口！大虾们应该怎么实现啊啊啊等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址:https://www.54852.com/web/9468873.html

js实现点击显示一个div,点击其他任何地方div消失,如何实现

发表评论

评论列表（0条）