Question

我有一个聊天区域，我试图与knockoutJS绑定。此聊天区域将浮动，位置使用css

固定

.floatingDiv
{
width: auto;
float: right;
position: fixed;
top: 58%;
height: 255px;
z-index:0;
}

页面上存在很少的锚标签和按钮，在少数情况下会移动到chatarea后面。发生这种情况时，我无法点击锚标签/按钮。

以下是我无法点击“google redirection”链接的示例

                <!DOCTYPE html>
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title></title>
            </head>
            <body>
                <script src="Scripts/jquery-2.1.4.js"></script>
                <script src="Scripts/knockout-3.3.0.js"></script>
                <style>

            .floatingDiv
            {
                width: auto;
                float: right;
                position: fixed;
                top: 58%;
                height: 255px;

                z-index:0;
            }
            .labelBox
            {
                float: right;
                background: white;
                border: 1px solid gray;
                margin-right: 30px;
                margin-left:30px;
                height: 280px;
                width: 250px;
            }
             .labelBoxHeaderColor {
                background-color:#0094ff;
              }
                </style>
                <script type="text/javascript">
                    function MyViewModel(){
                        var self =this;
                        self.list = ko.observableArray(['1', '2', '3']);
                    }
                    $(document).ready(function(){
                        var vm = new MyViewModel();
                        ko.applyBindings(vm);
                    });

                </script>
                <div>

                    Hello world<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br />
                   <a href="http://www.google.com">Google Redirection</a>
                </div>

                <div class="floatingDiv">
                 <!-- ko foreach: list -->
               <table class="labelBox" data-bind="attr:{id: 'index' +$index() }" >
                     <tbody>
                         <tr   data-bind="attr:{id: 'header' +$index() }" ">
                             <th class="labelBoxHeaderColor"> 
                                 <table width="100%">
                                     <tbody>
                                         <tr>
                                             <td style="width: 5%;"> <span width="1" height="1"  data-bind="text: 'label' + $index()">
                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>  
                             </th>
                         </tr>
                         <tr>
                             <td> 
                                 <div style="height: 215px; overflow: auto;"> 
                                     <table  data-bind="attr:{id: 'mainArea' +$index() }"  >
                                         <tbody>
                                             <tr>
                                                 <td></td>
                                                 <td></td>
                                             </tr>
                                         </tbody>
                                     </table>
                                 </div> 
                             </td> 
                         </tr> 
                     </tbody>
                 </table>
                  <!-- /ko -->
                    </div>
            </body>
            </html>

我尝试为floatDiv的z-index设置z-index，但这对我没有帮助。有人可以建议如何在任何情况下使聊天区域后面的所有链接/按钮都可以点击吗？注意：我甚至点击聊天区域框。

Answer 1

使用pointer-events忽略.floatingDiv上的鼠标事件：

.floatingDiv {
  pointer-events: none;
}

这是一个简单的例子。您可以看到固定红色div上的鼠标事件被忽略，但它们会向下冒泡到下面的元素，在这种情况下是一个按钮。

结果是，即使该按钮不是鼠标事件的直接目标，您也可以单击该按钮如果从div中删除pointer-events:none，则无法单击该按钮。

div  {
    background-color: rgba(255,0,0,.5);
    position: fixed;
    top: 0;
    pointer-events: none;
}

<button>button below</button>
<div>I am on top,<br>but you can click the button underneath</div>

Answer 2

最后让它发挥作用..

删除了floatingDiv div并为每个标签框添加了样式（左侧位置）。通过这种方式，它甚至可以点击两个标签框之间的链接。

由于浮动div，无法单击超链接/按钮

2 个答案: