li标签没有触摸事件 [英] No touch event for li tag

问题描述

我使用触摸显示器和 html页面(MS Windows 7 Pro Eng，IE8).我发现点击li标签的文本区域并忽略其余部分时会触发触摸.

I use touch monitor and html page (MS Windows 7 Pro Eng, IE8). And I discovered that touch fires when text area of li tag is tapped and the rest is ignored.

如何更改它，即使用户轻按它触发的白色或非文本区域也是如此.

How change it so even if user tap on white/non-text area of the li it fires as it should.

<link href="css/bootstrap.min.css" rel="stylesheet" />    
<script src="jquery-1.11.3.min.js"  type="text/javascript"></script>
<script src="jquery.mobile-1.4.5.min.js" type="text/javascript"></script>

<ul class="nav" id="mainList">
        <li class="touchedLi stripe-even" id="item0"><a  href="#">Club Yellow 1</a></li>
        <li class="touchedLi stripe-odd" id="item1"><a href="#">Club Yellow 2</a></li>
        <li class="touchedLi stripe-even" id="item2"><a  href="#">Club Yellow 3</a></li>
    </ul>

CSS

li.stripe-even {
    background-color: #FFF1ED;
    list-style-type: none;
}

li.stripe-odd{
  background-color: #F2FFED;
  list-style-type:none;
}

ul.mainList li:hover{
background-color: yellow;
}

#mainList a:active {
    color: white;
    background-color: orange;
}

#mainList>li>a {
    display: block;
}

li.stripe-even {
background-color: #FFF1ED;
list-style-type: none;
}

li.stripe-odd{
  background-color: #F2FFED;
  list-style-type:none;
}

 ul.mainList li:hover{
    background-color: yellow;
    }
    
    #mainList a:active {
    	color: white;
        background-color: orange;
    }
    
    #mainList>li>a {
        display: block;
    }

    #mainList>li {
        display: block;
    }

 #mainList>li {
    display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 


<ul class="nav" id="mainList">
            <li class="touchedLi stripe-even" id="item0"><a  href="#">Club Yellow 1</a></li>
            <li class="touchedLi stripe-odd" id="item1"><a href="#">Club Yellow 2</a></li>
            <li class="touchedLi stripe-even" id="item2"><a  href="#">Club Yellow 3</a></li>
        </ul>

推荐答案

所以我找到了可行的解决方案

So I found working solution

什么都没有，只有 

所以li标记应如下图所示

<ul class="nav" id="mainList">
            <li class="touchedLi stripe-even" id="item0"><a  href="#">Club Yellow 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
            <li class="touchedLi stripe-odd" id="item1"><a href="#">Club Yellow 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
            <li class="touchedLi stripe-even" id="item2"><a  href="#">Club Yellow 3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
</ul>

然后 的区域是可触摸的区域！ :)

And then the area of   is a touchable area! :)

如何添加 取决于您的需求.

How you are gonna add   it depends of your needs.

这篇关于li标签没有触摸事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！