Geek asks and answers

Does a button element not trigger a click event when you click on the button text and release it (but still inside the button)?

In WebKit browsers (I tested Chrome and Safari on Mac), the button element behaves strangely:

Wen in this fiddle http://jsfiddle.net/5ReUn/3/ you do the following:

  • Click the left mouse button when the cursor is over the HTML button text
  • Move the cursor (when pressed) to the button area without text
  • Release the mouse button

Then the click event on the button element does not fire!

HTML is very simple:

<button id="button">Click</button>

And CSS is not at all complicated:

button {
    display: block;
    padding: 20px;
}

JS for click capture:

button = document.getElementById('button');
button.addEventListener('click', function() {
    console.log('click');
});

Many visitors to my site complain that the buttons are not available. They do not understand that they move the cursor when pressed.

Has anyone found a workaround for this?

+5
4

, WebKit.

, JavaScript, , SPAN :

<button>
    <span>Click Me</span>
</button>

CSS:

span {
    display: block;
    padding: 20px;
    pointer-events: none;   // < --- Solution!
}

WebKit, , pointer-events, .

+9

, . , mousedown .

//This is same as click event
var down = false;
var button = document.getElementById('button');
var info = document.getElementById('info')
button.addEventListener('mousedown', function() {
    down = true;  
});


button.addEventListener('mouseup', function() {
    if(down){
        info.innerHTML += "click ";
        down = false;
    }
});

jsfiddle

+1

, mousedown click.

, , . , , . .

+1

div ( , 20px?) js/jquery, . , click (lol), script - . , , , , , , ( , Facebook -).

0

More articles:


All Articles