有没有办法将点击事件绑定到jquery中div的左边框？答案

【问题标题】：Is there any way to bind a click event to a div's left border in jquery?有没有办法将点击事件绑定到jquery中div的左边框？
【发布时间】：2015-06-09 17:24:33
【问题描述】：

我有一个 div

<div id="preview">
</div>

有没有什么方法可以将点击事件绑定到这个div的左边框？

提前致谢。

【问题讨论】：

你能写一个选择器来选择一个边框吗？边框是元素吗？
简短的回答是否定的，但有一些方法可以解决这个问题。我建议在 div 上添加 click 事件，然后检查鼠标坐标（单击时）是否在 div 的左边框上。

标签： javascript jquery html click

【解决方案1】：

div {
    height:100px;
    border:4px solid black;
    padding:10px;
}

请试试这个方法

$('div').click(function(e){
   if(  e.offsetX < 5){
        alert('clicked on the left border!');
    }
});

编辑 - 更好的版本

$('div').click(function(e){
    if(  e.offsetX <= parseInt($(this).css('borderLeftWidth'))){
       alert('clicked on the left border!');
    }
});

【讨论】：

如果我要这样做，我会使用computed value 而不是硬编码。也许 jQuery 有计算值，我不确定，必须检查他们的文档。
你可以用这个得到计算值 -> if(e.offsetX<=parseInt($(this).css('borderLeftWidth'))
@Rino Raj 。感谢你的回答。但是if条件中缺少一个')'，您可以编辑答案吗？它有效。

【解决方案2】：

您仅在元素上有事件。边框不是元素。但是你可以使用伪元素让它看起来像元素。

$(document).ready(function () {
  $(".border:before").click(function () {
    alert("Hi");
  });
});

.border {border-left: 5px solid #99f; padding-left: 10px; position: relative;}
.border:before {content: " "; display: block; height: 5px; width: 5px; position: absolute; left: -5px; top: 0; background: #f00; height: 1em;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>

或者你可以用一个父元素包围。

$(function () {
  $(".outer").click(function () {
    alert("Hi");
  });
  $(".inner").click(function () {
    return false;
  });
});

.outer {background: #f00; padding-left: 5px;}
.inner {background: #fff; padding: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="outer"><div class="inner">Hi</div></div>

如果您觉得不应该手动添加边框，那么您已经在使用 JavaScript 添加事件了。您可以动态创建元素并使其可点击。

$(function () {
  $(".border").wrap("<div class='outer' />");
  $(".outer").click(function () {
    alert("Hi");
  });
});

.border {border-left: 5px solid #f00; padding: 5px;}
.outer {padding-left: 5px; background: #f00;}
.outer .border {background: #fff; border: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>

或者最好的方法是使用计算的值和事件。

$(document).ready(function () {
  $(".border").click(function (e) {
    if (e.offsetX < parseInt($(this).css("border-left-width").replace("px", "")))
      alert("Hi");
  });
});

.border {border-left: 5px solid #99f; padding-left: 10px; position: relative;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>

【讨论】：

【解决方案3】：

我认为没有，但您可以使用另一个 div 制作自己的边框并在其上设置点击事件！

这是一个例子：

HTML

<div id="preview">
<div id="leftborder"></div>
</div>

CSS

#preview{
width:200px;
height:200px;
background-color:black;
border: 5px solid blue;
border-left:0px;
}
#leftborder{
width:5px;
height:100%;
background-color: blue;
}

JS

$( "#leftborder" ).click(function() {
   alert( "Left border clicked!" );
});

JS 部分是 jquery，所以你需要先将它包含在你的标题中。

【讨论】：

这个答案是不够的。人们可能会对此投反对票。
感谢警告添加了一个示例@Grimbode
无需复杂化 html。答案已发布，stackoverflow.com/a/30725885/1479535

【解决方案4】：

边框是不是元素，因此你不能将click事件绑定到它。如果你想要这种类型的功能，你需要在div，并绑定到那个。

【讨论】：

总有办法的。 :)

【解决方案5】：

这是一个简单的例子

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <style>
            .preview {
                background-color:#F5F5F5;
                width: 50%;
                height: 200px;
                padding:10px;
                border: 10px solid #FF0000;
            }
        </style>
    </head>
    <body>
        <div id="el" class="preview"></div>

        <!-- Script at the end -->
        <script type="text/javascript" >
            $('#el').click(function(e) {
                var $this = $(this);

                // Define the border with
                var border_width = 10;

                // Get the offset
                var offset = $this.offset();
                offset.left = e.pageX - offset.left;
                offset.top = e.pageY - offset.top;

                // Size can be used for calculate click on right border
                var size = {
                     'width' : $this.width()
                    ,'height' : $this.height()
                };

                if(offset.left <= border_width) {
                    console.info("border left clicked");
                }
            });
        </script>
    </body>
</html>

【讨论】：