10月11, 2016

div元素disabled

今天碰到了一个问题,是怎样某个下拉框(模拟)disabled的。

通常这种事情是组件提供方法,我只要调用它的disable方法即可。但因为这个组件,我一开始在写的时候,并没有将它考虑的非常全,导致无法快速搞定这个需求。

当然最好的方法是重新完善一下组件,然后提供API即可。但我是那种比较懒的人,所以就开始折腾一下,能不能通过其他的方式来搞定。

一开始想到的方式的是给div加disabled属性,发现不行。

disabled只会对form的表单控件元素起作用。

那么disabled做了什么事情?我们能不能来模拟实现。其实也就两件事:

  • 让这个层变灰,鼠标变个图标
  • 让这个层的事件off

变灰,鼠标变图标

.xxx{
      background:#eee;
      cursor:not-allowed;
}

事件off

一开始想到的是,将事件unbind。

但比如说这样的结构:

<div id="test1">

    <div id="test2"></div>

</div>

test1和test2都有事件绑定,我们要将test1元素disabled,光取消test1的事件是不够的,还要取消test2的事件。

当然我们也可以实现,但其实在css3中有一个属性,能够帮我们快速地解决这个问题

.xxx{
    pointer-events:none;
}

在不用考虑浏览器的情况下,我们可以通过以下的方式:

var o1 = document.getElementById("test1"),
    o2 = document.getElementById("test2");

o1.onclick = function(){
    alert(1);
}

o2.onclick = function(){
    alert(456);
}

o1.classList.add("dis-view", "dis-event");

setTimeout(function(){

    o1.classList.remove("dis-view", "dis-event");

}, 5000);

来添加/删除元素身上的class。

如果非要兼容的话,只能从组件本身着手了,点击的时候,判断是否disabled,如果是,直接return即可。

本文链接:www.my-fe.pub/post/how-to-make-div-disabled.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。