Question: I'm creating shopping cart page that there's a div have a click listener for redirecting to the product page, but you also can select qty on the div. How can I prevent the redirection when selecting from `<select/>`

I've tried `event.stopPropagation()` / `e.preventDefault()` on select but not working

Here's the sample code.

<https://jsfiddle.net/hk7861es/2/>

Answer: 
You can test whether the target is the parent div by `event.target == this`

Example:

```
$('#box').click(function(event) {
    if ( event.target == this ){ 
          $('#text').append('You clicked');
    }
})

```

Fiddle: <https://jsfiddle.net/hk7861es/3/>
Not exactly what you asked for, but definitely a simple solution:

**Add 1 line to check for click target**

```
if ($(event.target).is('#select')) return;

```

This line checks whether what you click is `#select`, if yes, ignore the event.

```js
$('#box').click(function(e) {
  if ($(e.target).is('#select')) return; // <--- ADD THIS LINE

  $('#text').append('You clicked');
})

$("#select").keypress(function () {
  $(this).val(valueToKeep);
});
$("#select").keydown(function () {
  valueToKeep = $(this).val();
});  
```

```css
#box {
  height: 200px;
  width: 400px;
  background-color: lightgrey;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  Volvo: 200hp ; $3000

  QTY:
  <select id="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>

</div>
<p id="text"></p>
```