您的位置:寻梦网首页编程乐园CSS 初步DHTML动态网页简明教程
DHTML动态网页简明教程

键盘响应及鼠标控制

作者:ahao

Capturing Keystrokes

相应敲击键是电脑和人的基本相互作用。你可以控制任何一个键的按下和松开。首先我们先要知道如何启动一个所谓的事件 (event). 下面是启动一个把键按下的"onkeydown" 的事件.

  document.onkeydown = keyDown

这里的 keyDown 是你所要编写的相应键盘的子程序。当你的浏览器读了以上的语句, 它将会知道哪个键被按下了,然后启动子程序 keyDown()。 子程序的名字随你起了,在这里在子程序名字后面不需要括号。取得哪个键被按下却在Netscape 和 IE 有所不同。看以下代码,如果用的是 Netscaep, 变量 nKey 将会得到 key code, 而让 ieKey 为 0. 相反, 如果用的是 IE, ieKey 为 key code 而 nKey 为 0:

  function keyDown(e) {
    if (ns4) {var nKey=e.which; var ieKey=0}
    if (ie4) {var ieKey=event.keyCode; var nKey=0}
    alert("nKey:"+nKey+" ieKey:" + ieKey);
  }

  document.onkeydown = keyDown
  if (ns4) document.captureEvents(Event.KEYDOWN)

用键盘移动元素

假如你想用键盘来启动你的滑动, 你需要先知道哪个键被按了, 然后用相应的子程序来滑动元素. 下面我们准备用 "A" 键来启动滑动子程序. Netscape 的 "A" 是 97. 而 IE 是 65. 也就是说, nKey 为 97 而 ieKey 为 65.

  function init() {
    if (ns4) block = document.blockDiv
    if (ie4) block = blockDiv.style
    block.xpos = parseInt(block.left)

    document.onkeydown = keyDown
    if (ns4) document.captureEvents(Event.KEYDOWN)
  }

  function keyDown(e) {
    if (ns4) {var nKey=e.which; var ieKey=0}
    if (ie4) {var ieKey=event.keyCode; var nKey=0}
    if (nKey==97 || ieKey==65) {   // if "A" key is pressed
        slide()
    }
  }

  function slide() {
    if (block.xpos < 300)
    {
    block.xpos += 5
    block.left = block.xpos
    status = block.xpos       // not needed, just for show
    setTimeout("slide()",30)
    }
  }

启动变量

我们这里介绍一种方法: 启动变量, 来控制滑动的停止和启动. 这个变量记录了元素是否在动还是不动. 然后在滑动子程序里放置 "if" 语句, 根据这个启动变量的值来决定是否停止还是继续滑动.

  function slide() {
    if (myobj.active) {
    myobj.xpos += 5
    myojb.left = myobj.xpos
    setTimeout("slide()",30)
    }
  }

使用 onKeyUp 和启动变量来控制滑动

onkeyup 就是 onkeydown 相反, 也就是说它用来对键起来这个事件做出反应的.

  document.onkeydown = keyDown
  document.onkeyup = keyUp
  if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)

下面就是一个完整的程序.

  function init() {
    if (ns4) block = document.blockDiv
    if (ie4) block = blockDiv.style
    block.xpos = parseInt(block.left)
    block.active = false

    document.onkeydown = keyDown
    document.onkeyup = keyUp
    if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)
  }

  function keyDown(e) {
    if (ns4) {var nKey=e.which; var ieKey=0}
    if (ie4) {var ieKey=event.keyCode; var nKey=0}
    if ((nKey==97 || ieKey==65) && !block.active) {   // if "A" key is pressed
        block.active = true
        slide()
    }
  }
  function keyUp(e) {
    if (ns4) {var nKey=e.which; var ieKey=0}
    if (ie4) {var ieKey=event.keyCode; var nKey=0}
    if (nKey==97 || ieKey==65) {
        block.active = false   // if "A" key is released
    }
  }

  function slide() {
    if (block.active) {
        block.xpos += 5
        block.left = block.xpos
        status = block.xpos       // not needed, just for show
        setTimeout("slide()",30)
    }
  }

 

 上一节 返回目录 下一节
返回dhtml栏目