大家帮个忙呀，实现一个联系点击几块地方触发一个事件？？？

最土的方法，在四个角都放上onclick

解决方案 »

  1.   

    四个角都放上onclick，那也不对呀！
    你点一个onclick就触发了，我现在想实现的是“连续点”了这“四个”以后才触发呢。
      

  2.   

    点一个 onclick 将鼠标移到另外一个角不久行了
      

  3.   

    你把点击动作都记录在一个全局变量里不就完了？
    四个链接每次点击后往里面添加 1/2/3/4, 每次点击里都判断如果1234都齐了就触发 xxx
      

  4.   

    全局数组存event.clientX和event.clientY的坐标，要先判断坐标范围是否是你划定的区域。感觉是在做彩蛋，好玩儿^_^
      

  5.   

    <table width="100%" height="100%">
      <tr>
        <td><div onclick="t(1)">点击</div></td><td><div onclick="t(2)">点击</div></td>
      </tr>
      <tr>
        <td><div onclick="t(4)">点击</div></td><td><div onclick="t(3)">点击</div></td>
      </tr>
    </table><script type="text/javascript">var str = ""; // 全局变量
    function t(num)
    {
      str += num;
      if (str.indexOf("1234") > -1)
      {
        // 按顺序点时才执行
        alert("OK");
        str = "";
      }
    }</script>
      

  6.   


    <html>
    <head>
    <style type="text/css">
    div
    {
    position:absolute;
    background-color:#efefef;
    }
    </style> <script type="text/javascript">
    function $(id)
    {
    return document.getElementById(id);
    } function initialize()
    {
    $("div1").style.width="100px";
    $("div1").style.height="100px";
    $("div1").style.left="0";
    $("div1").style.top="0";
    $("div1").innerHTML="1"; $("div2").style.width="100px";
    $("div2").style.height="100px";
    $("div2").style.left=document.body.clientWidth-parseInt($("div2").style.width);
    $("div2").style.top="0";
    $("div2").innerHTML="2"; $("div3").style.width="100px";
    $("div3").style.height="100px";
    $("div3").style.left="0";
    $("div3").style.top=document.body.clientHeight-parseInt($("div3").style.height);
    $("div3").innerHTML="3"; $("div4").style.width="100px";
    $("div4").style.height="100px";
    $("div4").style.left=document.body.clientWidth-parseInt($("div4").style.width);
    $("div4").style.top=document.body.clientHeight-parseInt($("div4").style.height);
    $("div4").innerHTML="4";

    }
    var arr=new Array();
    document.onmousedown=function(event){validate(event)};
    window.onresize=initialize;
    function validate(e)
    {
    e=e||event;
    if(e.clientX>parseInt($("div1").style.left)
    && e.clientX<parseInt($("div1").style.left)+parseInt($("div1").style.width)
    && e.clientY>parseInt($("div1").style.top)
    && e.clientY<parseInt($("div1").style.top)+parseInt($("div1").style.height))
    {
    arr.push(1);
    }
    else if(e.clientX>parseInt($("div2").style.left)
    && e.clientX<parseInt($("div2").style.left)+parseInt($("div2").style.width)
    && e.clientY>parseInt($("div2").style.top)
    && e.clientY<parseInt($("div2").style.top)+parseInt($("div2").style.height))
    {
    arr.push(2);
    }
    else if(e.clientX>parseInt($("div3").style.left)
    && e.clientX<parseInt($("div3").style.left)+parseInt($("div3").style.width)
    && e.clientY>parseInt($("div3").style.top)
    && e.clientY<parseInt($("div3").style.top)+parseInt($("div3").style.height))
    {
    arr.push(3);
    }
    else if(e.clientX>parseInt($("div4").style.left)
    && e.clientX<parseInt($("div4").style.left)+parseInt($("div4").style.width)
    && e.clientY>parseInt($("div4").style.top)
    && e.clientY<parseInt($("div4").style.top)+parseInt($("div4").style.height))
    {
    arr.push(4);
    }
    else
    {
    arr.length=0;
    }
    if(arr.length==4 && arr[0]==1 && arr[1]==2 && arr[2]==3 && arr[3]==4)
    {
    doSomething();
    }
    }; function doSomething()
    {
    alert("Congratulate to next stage!");
    }; </script>
    </head>
    <body onload="initialize()">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    </body>
    </html>
    你按1,2,3,4的顺序点就可以看到效果，点错了可以点空白区域重置。