如何让div里面的内容,能够看见,但是点不着

什么意思呢？ 你是要onclick失效，这样能达到你的要求不？document.getElementByid("元素id").onclick = function(){return false}这样行吗

解决方案 »

  1.   

    disable = true点击还是会触发事件的啊 
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script language="javascript"> 
    var fals=function(){
    return false;
    };
    </script> 
    </head> <body> 
    <form name="docForm"> 
    <div id="div1"> 
    <input type="checkbox" name="chk1" onclick="fals()"/> 
    <input type="text" value="ss1" onclick="fals()" /> 
    <img src="1.jpg" onclick="fals()" width="50" height="50"/> 
    </div> 
    </form> </body> 
    </html>
      

  3.   

    disable  最好，这样即使有事件，也无效
      

  4.   


    不知道LZ的目的是什么，但我觉得这个方式可以实现能看见，但不能点击里面的元素，而且也不会出现用disable属性后的变灰样式
      

  5.   

    要不就在DIV的控件方法里做文章.
    要不就用透明层覆盖.
      

  6.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script language="javascript"> </script> 
    </head> <body>
    <script language="javascript">
    <!--
    var k=0,a=[]
    function sset(_this){
    var obj=document.getElementById("div1").getElementsByTagName("*")
    if(k==0){
    k=1
    for (var i=0;i<obj.length;i++)
    a[i]=obj[i].onclick
    }
    if (_this.checked)
    for (var i=0;i<obj.length;i++)
    obj[i].onclick=null
    else{
    for (var i=0;i<obj.length;i++)
    obj[i].onclick=a[i]
    }
    }
    //-->
    </script>
    <input type="checkbox" name="chk" onclick="sset(this)"/> 功能失效
    <hr> 
    <form name="docForm"> 
    <div id="div1"> 
    <input type="checkbox" name="chk1" onclick="alert('1');"/> 
    <input type="text" value="ss1" onclick="alert('2');" /> 
    <img src="1.jpg" onclick="alert('3');" width="50" height="50"/> 
    </div> 
    </form> </body> 
    </html>
      

  7.   


    能否改进一下,我的要求是这三个控件都点不着,也就是说
    1.text框做出来的效果就好像是text的readonly的属性被设成true一样
    2.checkbox出来的效果就好像是checkbox的disabled的属性被设成true一样
      

  8.   

    <style>
    #div1{
    position:relative;
    width:200px;
    height:100px;
    }
    .div{
    position:absolute;
    z-index:1;
    width:200px;
    height:100px;
    background:#FF0000;
    filter: alpha(opacity=10);
    -moz-opacity:0.1;
    opacity: 0.1;
    }
    </style>
    <div id="div1"> <div class="div"></div>
    <input type="checkbox" name="chk1" onclick="alert('1');"/> 
    <input type="text" value="ss1" onclick="alert('2');" /> 
    <img src="1.jpg" onclick="alert('3');" width="50" height="50"/> 
    </div>
      

  9.   

    加一层透明层，但是如果有dropdownlist的控件的话，可还要隐藏此类控件
      

  10.   

    用DOM添加属性:disable = true,至于怎么找到你的元属可以用rel=read
      

  11.   

    我现在不用考虑dropdownlist
      

  12.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> <body>
    <script language="javascript">
    <!--
    function getPosition(theElement){
    var positionX =0;
    var positionY =0;
    var w=theElement.offsetWidth
    var h=theElement.offsetHeight
    while (theElement !=null){
    positionX +=theElement.offsetLeft;
    positionY +=theElement.offsetTop;
    theElement =theElement.offsetParent;
    }
    return [positionX,positionY,w,h];
    }
    onload=function(){
    var obj=document.getElementById("div1")
    var p=getPosition(obj)
    var updivimg=document.createElement("img")
    updivimg.src="updiv.gif"
    with(updivimg.style){
    position="absolute"
    width=p[2]+"px"
    height=p[3]+"px"
    left=p[0]+"px"
    top=p[1]+"px"
    boeder="none"
    zIndex=1000
    obj.appendChild(updivimg)
    }
    }
    //-->
    </script>
    <form name="docForm"> 
    <div id="div1"> 
    <input type="checkbox" name="chk1" onclick="alert('1');"/> 
    <input type="text" value="ss1" onclick="alert('2');" /> 
    <img src="1.jpg" onclick="alert('3');" width="50" height="50"/> 
    </div> 
    </form> </body> 
    </html>
    其中"updiv.gif"1*1像素透明图片
      

  13.   

    小更正:<script language="javascript">
    <!--
    function getPosition(theElement){
    var positionX =0;
    var positionY =0;
    var w=theElement.offsetWidth
    var h=theElement.offsetHeight
    while (theElement !=null){
    positionX +=theElement.offsetLeft;
    positionY +=theElement.offsetTop;
    theElement =theElement.offsetParent;
    }
    return [positionX,positionY,w,h];
    }
    onload=function(){
    var obj=document.getElementById("div1")
    var p=getPosition(obj)
    var updivimg=document.createElement("img")
    updivimg.src="updiv.gif"
    with(updivimg.style){
    position="absolute"
    width=p[2]+"px"
    height=p[3]+"px"
    left=p[0]+"px"
    top=p[1]+"px"
    boeder="none"
    zIndex=1000
    }
    obj.appendChild(updivimg)
    }
    //-->
    </script>
      

  14.   

    可以参考我这里的用法.
    http://vip.pastein.net/kanke/natineprince/ro/RoSkill/knight.html如果只覆盖DIV的话.要计算出DIV的TOP和LEFT等属性.再把覆盖层移过去.
      

  15.   


    <style>
    #div1{
    position:absolute;
    top:50px;
    left:0px;
    width:200px;
    height:100px;
    }
    #div2{
    position:absolute;
    z-index:1;
    width:200px;
    height:100px;
    background:#FF0000;
    filter: alpha(opacity=10);
    -moz-opacity:0.1;
    opacity: 0.1;
    }
    </style>
    <span id=control>
    <input type=button value="enable" onclick="document.all.div2.style.display='block'">
    <input type=button value="disable"  onclick="document.all.div2.style.display='none'">
    </span>
    <div id="div1"> <div id="div2"></div>
    <input type="checkbox" name="chk1" onclick="alert('1');"/> 
    <input type="text" value="ss1" onclick="alert('2');" /> </div>
    修改了一下16楼的
      

  16.   

    or:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> <body>
    <style>
    .updiv{filter: alpha(opacity=0); -moz-opacity:0; opacity: 0; }
    </style><script language="javascript">
    <!--
    function getPosition(theElement){
    var positionX =0;
    var positionY =0;
    var w=theElement.offsetWidth
    var h=theElement.offsetHeight
    while (theElement !=null){
    positionX +=theElement.offsetLeft;
    positionY +=theElement.offsetTop;
    theElement =theElement.offsetParent;
    }
    return [positionX,positionY,w,h];
    }
    onload=function(){
    var obj=document.getElementById("div1")
    var p=getPosition(obj)
    var updiv=document.createElement("div")
    with(updiv.style){
    position="absolute"
    width=p[2]+"px"
    height=p[3]+"px"
    left=p[0]+"px"
    top=p[1]+"px"
    boeder="none"
    zIndex=1000
    background="#fff"
    }
    updiv.className="updiv"
    obj.appendChild(updiv)
    }
    //-->
    </script>
    <form name="docForm"> 
    <div id="div1">
    <input type="checkbox" name="chk1" onclick="alert('1');"/> 
    <input type="text" value="ss1" onclick="alert('2');" /> 
    <img src="1.jpg" onclick="alert('3');" width="50" height="50"/> 
    </div> 
    </form> </body> 
    </html>
      

  17.   

    再改一下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> <body>
    <style>
    .updiv{filter: alpha(opacity=0); -moz-opacity:0; opacity: 0; }
    </style><script language="javascript">
    <!--
    function getPosition(theElement){
    var positionX =0;
    var positionY =0;
    var w=theElement.offsetWidth
    var h=theElement.offsetHeight
    while (theElement !=null){
    positionX +=theElement.offsetLeft;
    positionY +=theElement.offsetTop;
    theElement =theElement.offsetParent;
    }
    return [positionX,positionY,w,h];
    }
    function  yes(_this){
    var obj=document.getElementById("div1")
    if (!document.getElementById("updiv")){
    var p=getPosition(obj)
    var updiv=document.createElement("div")
    updiv.id="updiv"
    with(updiv.style){
    position="absolute"
    width=p[2]+"px"
    height=p[3]+"px"
    left=p[0]+"px"
    top=p[1]+"px"
    boeder="none"
    zIndex=1000
    background="#fff"
    }
    updiv.className="updiv"
    obj.appendChild(updiv)
    _this.value="disable"
    }
    else{
    obj.removeChild(document.getElementById("updiv"));
    _this.value="enable"
    }
    }
    //-->
    </script>
    <form name="docForm"> 
    <div id="div1">
    <input type="checkbox" name="chk1" onclick="alert('1');"/> 
    <input type="text" value="ss1" onclick="alert('2');" /> 
    <img src="1.jpg" onclick="alert('3');" width="50" height="50"/> 
    </div> 
    </form> 
    <hr>
    <input type=button value="enable" onclick="yes(this)"></body> 
    </html>
      

  18.   

    呵呵，给你思路，自己扩展，什么都让别人写觉得有盗代码的嫌疑我给你的只是一种解决思路而已你想怎么扩展都是你自己的事你说的效果不外乎就是改变样式的问题1.插入两个button来控制这个透明层,一个button取名enable,另一个为disable 
    2.点enable之后,我可以对三个控件操作 
    3.点disable之后,使鼠标点不着这三个控件. 你这三个总结起来就是改变 <div class="div"> </div> 
    这个的zindex值而已
    改为-1就可以操作，改为1就不能操作