javascript - How to include padding as part of a div that can be clicked to trigger event - Stack Overflow

admin管理员组

文章数量:1289874

Is there a way to make a JQuery .click function work for when someone clicks on the padding on a div? Also, is there a way to make the cursor: pointer CSS styling work for when one hovers over the padding of a div as well?

Here is the div:

<div class="fa fa-angle-double-right fa-lg right-sidebar-show close-button"></div>

I styled the CSS for the div like so:

.right-sidebar-show.close-button {
  float: left;
  cursor: pointer;
  position: absolute;
  right: 155px;
  top: 0px;
  z-index: 2;
  padding: 15px 20px 12px 20px;
}

And here is the Javascript event that triggers when the user clicks the .right-sidebar-show class:

$(".right-sidebar-show").click(function(e) {
    if(Cookies.get('helpOpen') == "true") {
      close();
    }

    else if (Cookies.get('helpOpen') == "false") {
      open();
    } 
  });

Is there a way to make a JQuery .click function work for when someone clicks on the padding on a div? Also, is there a way to make the cursor: pointer CSS styling work for when one hovers over the padding of a div as well?

Here is the div:

<div class="fa fa-angle-double-right fa-lg right-sidebar-show close-button"></div>

I styled the CSS for the div like so:

.right-sidebar-show.close-button {
  float: left;
  cursor: pointer;
  position: absolute;
  right: 155px;
  top: 0px;
  z-index: 2;
  padding: 15px 20px 12px 20px;
}

And here is the Javascript event that triggers when the user clicks the .right-sidebar-show class:

$(".right-sidebar-show").click(function(e) {
    if(Cookies.get('helpOpen') == "true") {
      close();
    }

    else if (Cookies.get('helpOpen') == "false") {
      open();
    } 
  });

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jul 7, 2016 at 21:17 keyan.rkeyan.r 13711 gold badge11 silver badge1111 bronze badges 4

• By default jQuery .click function works when someone clicks on the padding jsfiddle/z8L2cn80 ! – Ismail RBOUH Commented Jul 7, 2016 at 21:22
• @Ismail RBOUH is right. Maybe your problem is that your div is empty. So your code won't display anything like this, therefore no clickable zone. Add a width: 1px and height:1px to make something appear (with appropriate paddings) – PIIANTOM Commented Jul 7, 2016 at 21:27
• Give my an example of 'not empty' div to assist you in better alternatives. – Ismail RBOUH Commented Jul 7, 2016 at 21:28
• @PIIANTOM the div is not empty, there is a font awesome icon in it because of the class "fa fa-angle-double-right" – keyan.r Commented Jul 7, 2016 at 21:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

If you were to wrap the div in any sort of container element and then attach the on-click / hover events to that container, then that would result in events being triggered when the user clicks anywhere on the div (including the padding.) This should extend to cursor styling as well

If you're looking to target the padding exclusively then check out this answer here: https://stackoverflow./a/7462847/6477119

Everything you're asking for appears to work by default in jsfiddle. See this example.

By default, padding should be included in an element's click event. This is due to the way the padding is calculated in the W3C Box Model. It should be noted however, that margins will not be caculated in the event handler. I've included a border: 1px solid #ccc; around your menu button to show the area (including the padding) where the click event will apply.

As for the cursor property, it appears to work fine in Chrome in jsfiddle. I'm not sure why that would be causing a problem on your end.

DEMO:

On to the demo. I've created a working, though not well styled, demo to demonstrate a few key points.

HTML:

<div class="fa fa-angle-double-right fa-lg right-sidebar-show close-button"></div>
<div id="sidebar">
    <h2>This is a sidebar</h2>
</div>

CSS:

.right-sidebar-show.close-button {
  float: left;
  cursor: pointer;
  position: absolute;
  right: 155px;
  top: 0px;
  z-index: 2;
  padding: 15px 20px 12px 20px;
  border: 1px solid #ccc;
}
#sidebar {
  background: #aaa;
  position: fixed;
  width: 300px;
  top: 0;
  bottom: 0;
  left: -300px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
#sidebar.open {
  left: 0;
}

JavaScript:

$(function () {
    $(".right-sidebar-show").click(function(e) {
        if($('#sidebar').hasClass('open')) {
            $('#sidebar').removeClass('open');
        } else {
            $('#sidebar').addClass('open');
        }
    });
});

Make sure your event handler is wrapped in a $(document).ready or shorthand $(function () handler if not place right before the </body> tag.

You can simply your code and remove the need for an unnecessary cookie with a little refactoring. Allow your #sidebar to be opened and closed with a CSS3 transition by applying a class. Checking for this class will allow you to determine if the sidebar is opened or closed without the need for a cookie.

本文标签： javascriptHow to include padding as part of a div that can be clicked to trigger eventStack Overflow