こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

borderの箇所をマウスでクリック

cssでborderを指定し
ajaxで枠内、枠外では何も動作しないが
borderの箇所をマウスでクリックした場合のみ
動ささせるにはどのようにすればいいでしょうか。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div.button").mousedown(function () {
$("div#message").text("マウスのボタンが押されました。");
})
$("div.button").mouseup(function () {
$("div#message").text("マウスのボタンがはなされました。");
})
})
</script>
<style>
.button {
border: solid 1px #0094ff;
background-color: #e1e1e1;
width: 200px;
height: 32px;
}
</style>
</head>
<body>
<div class="button">枠</div>
<div id="message"></div>
</body>
</html>

投稿日時 - 2015-07-05 18:57:59

QNo.9006694

すぐに回答ほしいです

質問者が選んだベストアンサー

参考まで。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$(".button").mousedown(function (e) {
var border_width = parseInt($(this).css('border-width'));
if (e.offsetX < border_width || e.offsetX > $(this).innerWidth() || e.offsetY < border_width || e.offsetY > $(this).innerHeight()){
$("#message").text("マウスのボタンが押されました。");
}
});
$(document).mouseup(function (e) {
$("#message").empty();
});
});
</script>
<style>
.button {
border: solid 10px #0094ff;
background-color: #e1e1e1;
width: 200px;
height: 32px;
}
</style>
</head>
<body>
<div class="button">枠</div>
<div id="message"></div>
</body>
</html>

投稿日時 - 2015-07-06 00:07:04

お礼

ありがとうございます。参考にさせていただきます。

投稿日時 - 2015-07-06 20:33:19

ANo.1

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)