javascript 想屏蔽键盘方向键控制div1（外层）的滚动条,却导致了div2（里层）里的文本框不能输入文字了，怎么解决

<html>
<head>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
var x1=0;
var x2=0;
$(document).ready(function(){
  $("input").focus();
  $("#div1").bind("keydown",function() {
        return false;//想屏蔽键盘方向键控制div1的滚动条,却导致了div2里的文本框不能输入文字了，怎么解决
        //return true; //文本框可以输入文字了
  });
  $("#div2").bind("keydown",function() {
    $("#span1").text(x1+=1);
  });
  $("input").bind("keydown",function() {
    $("#span2").text(x2+=1);
  });
});
</script>
</head>
<body>
    <div id="div1" style="width:200px;height:100px;overflow:scroll;border:1px solid green" onkeydown="return false;">
    <div id="div2" style="width:999px;border:1px solid red" >
        <input value="aaabbbccc"><BR>
        text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. </div>
        <br /><br />
        text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.</div>
    <p>div1里的div2 键盘按了 <span id="span1">0</span> 次。</p>
    <p>div1里的div2里的textbox 键盘按了 <span id="span2">0</span> 次。</p>
</body>
</html>
JavaScript事件冒泡 屏蔽JQuery

解决方案 »

  1.   


    大家可以用 http://www.w3school.com.cn/tiy/t.asp 测试一下
      

  2.   

      $("input").bind("keydown",function(event) {
        $("#span2").text(x2+=1);
    event.stopPropagation();
      });
      

  3.   


    首先，谢谢你的回答。
    以上代码的确好使，不过把TextBox换成TD对象里就不好使了。
    （其实我最终要做的是在TD的Keydown事件里加亮显示Table的Cell,来模拟使用方向键选中Cell,这个时候不想外层Div的滚动条一起动）<html>
    <head>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
    <script type="text/javascript">
    var x1=0;
    var x2=0;
    $(document).ready(function(){
      $("input").focus();
      $("#div1").bind("keydown",function() {
            return false;//想屏蔽键盘方向键控制div1的滚动条,却导致了div2里的文本框不能输入文字了，怎么解决
            //return true; //文本框可以输入文字了
      });
      $("#div2").bind("keydown",function() {
        $("#span1").text(x1+=1);
      });
      $("table").find("td").bind("keydown",function(event) {
        $("#span2").text(x2+=1);
        event.stopPropagation();
      });
    });
    </script>
    </head>
    <body>
        <div id="div1" style="width:200px;height:100px;overflow:scroll;border:1px solid green" onkeydown="return false;">
        <div id="div2" style="width:999px;border:1px solid red" >
            <table border="1" cellspacing="0" cellpadding="0">
                <tr><td><input value="aaabbbccc"></td></tr>
                <tr><td>text........</td></tr>
            </table>
        </div>
        </div>
        <p>div1里的div2 键盘按了 <span id="span1">0</span> 次。</p>
        <p>div1里的 div2里的td 键盘按了 <span id="span2">0</span> 次。</p>
    </body>
    </html>
      

  4.   

    jquery 的我不会， 下面是标准的javascritp 的实现思路。在IE， chrome上测试通过，firfox 没试过
    table.onselectstart = function(e) {
    var ent = e||event;
    return ent.srcElement.tagName=='INPUT';
    }
      

  5.   

    onKeyDown下件下，也可以用下面的语句来控制，方向键的有无效果。
    ent.returnValue = false;
      

  6.   


    TD的Keydown里使用event.stopPropagation()的时候不起作用。
    使用光标选中"Text..." 然后按左右方向键，Div的滚动条动了，没有达到屏蔽目的。
      

  7.   


    TD的Keydown里使用event.stopPropagation()的时候不起作用。
    使用光标选中"Text..." 然后按左右方向键，Div的滚动条动了，没有达到屏蔽目的。

      

  8.   

    <html>
    <head>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
    <script type="text/javascript">
    var x1=0;
    var x2=0;
    $(document).ready(function(){
      $("input").focus();
      $("#div1").bind("keydown",function() {
            return false;//想屏蔽键盘方向键控制div1的滚动条,却导致了div2里的文本框不能输入文字了，怎么解决
            //return true; //文本框可以输入文字了
      });
      $("#div2").bind("keydown",function() {
        $("#span1").text(x1+=1);
      });
      $("table").find("td").bind("keydown",function(event) {
        $("#span2").text(x2+=1);
      });
      $("table input").bind("keydown",function(event) {
        event.stopPropagation();
      });
    });
    </script>
    </head>
    <body>
        <div id="div1" style="width:200px;height:100px;overflow:scroll;border:1px solid green" onkeydown="return false;">
        <div id="div2" style="width:999px;border:1px solid red" >
            <table border="1" cellspacing="0" cellpadding="0">
                <tr><td><input value="aaabbbccc"></td></tr>
                <tr><td>text........</td></tr>
            </table>
        </div>
        </div>
        <p>div1里的div2 键盘按了 <span id="span1">0</span> 次。</p>
        <p>div1里的 div2里的td 键盘按了 <span id="span2">0</span> 次。</p>
    </body>
    </html>
      

  9.   

    ◆非常非常感谢你的回复。
    ◆Cell里的input是不一定有的，根据取得的数据而决定使用input/select/checkbox/span。
    所以这种方法还是不能达到目标。
    ◆我现在要解决的是，无论TD里有无文本框或其它控件(input/select/checkbox/span)，
    在保证TD的keydown(那里有必须执行的代码)的前提下屏蔽外层Div的Keydown，并且TD里的控件能正常使用。