javascript - Is there any way to bind a click event to a div's left border in jquery?

I have a div

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

Is there any way to bind a click event to this div's left border?

Thanks in advance.

I have a div

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

Is there any way to bind a click event to this div's left border?

Thanks in advance.

Share Improve this question asked Jun 9, 2015 at 7:30 Sanjay Kumar N S 4,7395 gold badges24 silver badges40 bronze badges

Can you write a selector to select a border? Is a border an element? – Xotic750 Commented Jun 9, 2015 at 7:34
Short answer is no, but there are ways around doing this. I recommend adding the click event on the div and then checking to see if the mouse coordinate (when clicked) is on the div's left border. – kockburn Commented Jun 9, 2015 at 7:36

Add a comment |

5 Answers 5

Sorted by: Reset to default 12

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

Please try this method

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

Edit - Better version

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

You have have events only on elements. Borders are not elements. But you can make it look like elements by using pseudo elements.

$(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>

Or you can go with having a parent element surrounded.

$(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>

If you feel you should not add borders manually, already you will be adding the events with JavaScript. You can create an element on the fly and make it clickable.

$(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>

Or the best way is to use the computed value and events.

$(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>

I don't think there is but you can make your own border with another div and set a click event on that!

Here is a example:

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;
}

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

the JS part is jquery so you gonna need to include that in your header first.

Borders are not elements, and as such you cannot bind click event to it.If you wanted this type of functionality, you would need to place an element at the left edge of the div, and bind to that.

here is an simple example

<!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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Is there any way to bind a click event to a div's left border in jquery? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)