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: 
There is multiple solutions to do this. 

1- You on click of `div` element you can check if clicked element is exactly the `div` element or not:

```
if(event.target.tagName == 'DIV'){
    // then redirect to target page
}

```

2- Or you can stop your `select` element from propagating event to upper level parents, as you did, but you didn't bind event handler to correct event on `select` element. You've used `keypress` on `select` but you have to use `click` event:

Fiddle: <https://jsfiddle.net/hk7861es/6/>
Change keypress to click and keydown to change.

```js
$('#box').click(function() {
  $('#text').append('You clicked');
})

$("#select").click(function (event) {
console.log('1111',event)
       //$(this).val(valueToKeep);
         event.stopPropagation();
  event.preventDefault();
  event.stopPropagation();
});
$("#select").change(function (event) {
console.log('222',event)
  event.stopPropagation();
  event.preventDefault();
  event.stopPropagation();
  valueToKeep = $(this).val();

});  
```

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

```html
<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>
```