不说那么多直接上代码。
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>无标题文档</title> <script src="http://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js"></script> <style> p{ height:20px; font-size:80px; text-align:center; color:#F70000; } .val{ position:absolute; top:20%; left:10%; background-color:#93C763; z-index:20; font-size:80px; } * { -webkit-touch-callout: none; -webkit-user-select: none; } #test { margin-left:70%; width:100px; border-color:#F70000; border: 2px solid ; } </style> <script> var carselect = { /******************* * 加载绑定事件 *******************/ int: function () { //手滑过 $("#test").on("touchmove", function (event) { carselect.selected(event); }); //手滑入 $('#test').on('touchstart', function (event) { $(this).css("background-color", "#D6D6D6"); carselect.selected(event); }); //手放开 $('#test').on('touchend', function (event) { $(".val").text(""); $(this).css("background-color", "#FFFFFF"); }); }, /******************* * 车型选择（拼音） * @param {event} 事件监控元素 *******************/ selected: function (event) { if (event.originalEvent.targetTouches.length == 1) { event.preventDefault(); var touch = event.originalEvent.targetTouches[0]; var x = touch.pageX; var y = touch.pageY; var e = document.elementFromPoint(x, y); var val = $(e).text(); if (val.length == 1) { $(".val").text(val); } } } } $(function () { carselect.int(); }); </script> </head> <body> <div id="test" style="text-align:center; "> <p>A</p> <p>B</p> <p>C</p> <p>D</p> <p>E</p> <p>F</p> <p>G</p> <p>H</p> <p>I</p> <p>J</p> <p>K</p> </div> <div class="val"></div> </body> </html>